分页控制必须写在@media print块内，优先用break-before: page等新语法，page-break-*仅作兼容补丁；对表格、Flex子项等需行级或容器级双写break-inside: avoid与page-break-inside: avoid，并避免overflow: hidden、flex/grid布局干扰。

直接说结论：分页控制必须写在 @media print 块内，且优先用 break-before: page 等新语法，page-break-* 仅作兼容补丁；对表格、Flex 子项等“难搞对象”，不能只靠父容器设分页规则。

为什么 page-break-before: always 经常不生效

它只对块级元素起作用，而很多现代布局会让目标元素“失去块级身份”：

• display: inline、display: flex 或 display: grid 的子元素，即使写了 page-break-before: always，浏览器也直接忽略
• 父容器设了 overflow: hidden 或 transform，会创建新的层叠上下文，阻断分页行为传播
• 在 @media screen 样式里混写打印分页规则（没包进 @media print），等于没写
• Chrome 100+ 已基本弃用 page-break-* 解析逻辑，但旧写法仍被部分引擎当作“软提示”处理，不可靠

真正该用的分页写法：只写 break-*，再补一行兼容

现代标准是 break-before、break-after、break-inside，它们在 Chrome/Firefox/Edge 中支持更一致。但 Safari 15.4 之前不认 break-inside: avoid，所以得双写：

@media print {
  .chapter-title {
    break-before: page;
    page-break-before: always;
  }
  .data-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

• break-before: page 是强制新开页的唯一稳定手段，别信 auto 或 avoid 在关键位置能兜底
• break-inside: avoid 对 有效，但对 整体无效——表格分页必须落到行级
  不要给

  直接设 break-after，先用

  包一层再控制

  表格和图片这类“天然易断”元素怎么防截断

  它们默认允许跨页断裂，而用户看到的往往是半张表或半张图。解决不是靠“撑高容器”，而是精准拦截断裂点：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  • 对每个
  加 break-inside: avoid，同时补 page-break-inside: avoid（旧版 Edge 需要）
  图片加 break-inside: avoid + max-width: 100%，防止宽图强行撑出页面边界
  避免用 float 或 position: absolute 包裹要分页的内容，这些属性会让 break-* 失效
  如果某张表实在很长，宁可手动用 break-after: page 在中间某行后切一刀，也别指望浏览器自动“智能续页”

  调试时最容易被忽略的三件事

  你写的规则可能全对，但预览里就是不按预期分页——问题往往不在 CSS 本身：

  • DevTools 的「Emulate CSS media → print」只是粗略模拟，break-before 行为和真实 Ctrl+P 打印预览不一致，必须开真预览翻页看
  • Firefox 和 Chrome 的分页算法不同：Firefox 更保守，倾向多分一页；Chrome 更激进，可能把 avoid 当建议忽略
  • 用户打印机设置（如“最小边距”“无背景图形”）会覆盖掉你写的 @page { margin: 2cm } 或背景色，所以关键信息别依赖背景或边距来传达

  最麻烦的从来不是写对语法，而是同一份 HTML，在 Chrome 打印预览里分 3 页，在 Firefox 里分 4 页，而用户最终用的是他电脑上那个版本——上线前至少要在三个浏览器里手动翻页检查两次。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！