如何打印网页时避免Div被分页截断？求有效解决方案

我需要打印MLB的比赛详情页面（如巨人vs道奇2022年7月24日的play-by-play页面），避免元素在分页处被截断——这是给一位蒙冤入狱、未来数年只能靠阅读度日的资深棒球迷准备的，试过多种break-inside相关的CSS代码都无效，求实测有效的Chrome方案。

实测有效的解决方案（Chrome适用） #

步骤1：添加自定义打印样式 #

1. 打开目标页面，按F12调出Chrome开发者工具
2. 切换到「Elements」面板，找到页面的<head>标签，右键选择「Edit as HTML」
3. 在<head>标签的末尾插入以下样式代码：

<style type="text/css">
@media print {
  /* 隐藏打印无关元素，减少分页干扰 */
  .gdh-header, .gdh-sidebar, .gdh-footer, .gdh-media-bar, .gdh-action-bar, .gdh-game-info-bar__right {
    display: none !important;
  }
  /* 让主内容区域铺满打印页面宽度 */
  .gdh-main-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 核心：禁止每个比赛play条目被分页截断 */
  .gdh-play-row, .gdh-play-container, .action, .pitches-exist {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    break-inside: avoid-page !important;
    display: block !important;
    position: static !important;
    overflow: visible !important;
    float: none !important;
    height: auto !important;
  }
  /* 设置打印页面边距，避免内容过于靠边 */
  @page {
    margin: 1cm;
  }
  /* 清除所有固定/浮动定位，避免布局错乱 */
  * {
    position: static !important;
    float: none !important;
  }
}
</style>

步骤2：调整打印设置 #

1. 按Ctrl+P调出打印预览界面
2. 在「更多设置」中：
   • 纸张尺寸选择「A4」
   • 缩放选择「适合页面宽度」，或自定义缩放比例（建议90%-100%）
   • 取消勾选「背景图形」（可选，减少墨量）
3. 预览确认每个play条目都完整显示在单页内，无截断后，保存为PDF或直接打印

补充说明 #

如果仍有个别元素截断，可在开发者工具中定位到该元素，查看其类名，添加到上述CSS的禁止截断选择器列表中即可。

内容的提问来源于stack exchange，提问作者Gumby The Green