break-after不生效的首要原因是未置于@media print媒体查询中，必须写在打印样式上下文内才有效；其次需确保目标元素为块级、父容器无overflow:hidden或transform等干扰属性。
打印时 break-after 不生效？先确认是否在媒体查询里写样式
直接在普通 <style></style> 里写 break-after: page，浏览器基本无视——它只在 @media print 上下文中起作用。很多开发者卡在这一步，反复改属性却没效果，其实根本没进打印样式流。
必须把分页控制逻辑包裹在媒体查询中：
@media print {
.page-break {
break-after: page;
}
}
注意：CSS 打印样式优先级和屏幕样式独立，即使加了 !important，如果不在 @media print 内，依然无效。
break-after: page 在 Chrome 和 Edge 中的兼容性陷阱
Chrome 80+、Edge 79+ 支持标准 break-after: page，但旧版（尤其 Chromium 内核的 Electron 应用）可能仍依赖已废弃的 page-break-after: always。二者行为不完全等价：
-
page-break-after: always会强制断页，哪怕元素在页尾空白区也生硬切开 -
break-after: page更智能，会尝试避免孤行/寡行，但某些布局下反而“不切” - Firefox 对
break-after的支持更保守，遇到浮动、flex 或 grid 容器子元素时可能静默失效
稳妥做法是双写：
@media print {
.section-end {
break-after: page;
page-break-after: always;
}
}
为什么 <table> 或 <code><div> 加了 <code>break-after 还是不断页？
常见于三类场景：
- 目标元素被设为
display: inline或inline-block——break-after只对块级盒（block-level box）有效，需显式加display: block - 父容器设置了
overflow: hidden或contain: layout，会截断分页上下文，导致子元素的分页声明被忽略 - 元素高度超过单页剩余空间，但浏览器选择“拉伸页面”而非分页（尤其当内容含大图或未设
max-height的弹性容器）
验证方式：打印预览中右键检查该元素，看 computed 样式里 break-after 是否解析为 page；若显示 auto，说明样式未命中或被覆盖。
避免打印分页错乱的两个硬约束
实际项目中最容易翻车的是这两点，且调试成本高：
- 所有参与分页的容器必须有明确的
width和height（或至少min-height），否则打印引擎无法估算页内布局，break-after行为不可预测 - 不要在
@media print中用position: fixed或transform做定位——它们会脱离分页流，导致后续break-after元素位置漂移甚至消失
如果你发现某一页底部留白异常大，或者内容突然“跳页”，八成是这两个约束没满足。
