分页控制必须写在@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对<tr> 有效，但对 <code><table> 整体无效——表格分页必须落到行级 <li>不要给 <code><div style="display: flex"> 直接设 <code>break-after，先用<section></section>包一层再控制表格和图片这类“天然易断”元素怎么防截断
它们默认允许跨页断裂，而用户看到的往往是半张表或半张图。解决不是靠“撑高容器”，而是精准拦截断裂点：
立即学习“前端免费学习笔记（深入）”；
- 对每个
<tr> 加 <code>break-inside: avoid，同时补page-break-inside: avoid（旧版 Edge 需要） - 图片加
break-inside: avoid+max-width: 100%，防止宽图强行撑出页面边界 - 避免用
float或position: absolute包裹要分页的内容，这些属性会让break-*失效 - 如果某张表实在很长，宁可手动用
break-after: page在中间某行后切一刀，也别指望浏览器自动“智能续页” - DevTools 的「Emulate CSS media → print」只是粗略模拟，
break-before行为和真实 Ctrl+P 打印预览不一致，必须开真预览翻页看 - Firefox 和 Chrome 的分页算法不同：Firefox 更保守，倾向多分一页；Chrome 更激进，可能把
avoid当建议忽略 - 用户打印机设置（如“最小边距”“无背景图形”）会覆盖掉你写的
@page { margin: 2cm }或背景色，所以关键信息别依赖背景或边距来传达
调试时最容易被忽略的三件事
你写的规则可能全对，但预览里就是不按预期分页——问题往往不在 CSS 本身：
最麻烦的从来不是写对语法，而是同一份 HTML，在 Chrome 打印预览里分 3 页，在 Firefox 里分 4 页，而用户最终用的是他电脑上那个版本——上线前至少要在三个浏览器里手动翻页检查两次。
- 对每个
