break-before: page强制分页常失效，因仅对块级、非绝对定位、非浮动、非匿名盒元素生效；需确保display: block、移除position/float干扰，并置于@media print中；表格跨页应拆分并用thead{display:table-header-group}。
直接用 break-before: page 或 page-break-before: always 就能强制分页，但多数失效不是因为写错了，而是目标元素不满足生效条件——比如它是 inline 元素、被设了 position: absolute、或嵌套在未重置 display 的 Flex 容器里。
为什么 break-before: page 在打印预览里没反应
这个属性只对块级、非绝对定位、非浮动、非匿名盒的元素起作用。常见失效场景：
- 目标元素是
<span></span>或<a></a>这类默认display: inline的标签，没显式设display: block - 用了
position: absolute或float: left，浏览器直接忽略分页声明 - 父容器是
display: flex或grid，子元素没加align-self: flex-start且未覆盖其默认display - CSS 写在常规样式表里，没包裹在
@media print中，被其他规则覆盖
实操建议：在打印媒体查询中单独定义，确保层级和优先级；检查 computed styles 确认最终 display 是 block，且无 position / float 干扰。
表格跨页断裂怎么修
break-inside: avoid 对 <table> 标签本身基本无效——这是规范行为，不是 bug。浏览器会把整张表当做一个不可分割单元处理，结果要么全挤在一页（溢出），要么硬塞进下一页（留白）。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>不要给 <code><table> 直接设 <code>break-inside: avoid
<table>，每个带完整 <code><thead>，中间插 <pre class="brush:php;toolbar:false;"><div style="break-before: page"></div></li>
<li>必须保留在单个 <code><table></pre> 内？给 <code><thead> 加 <code>display: table-header-group，再给每个 <tr> 同时写 <code>break-inside: avoid 和 page-break-inside: avoid
兼容老浏览器的写法要不要加 page-break-before
现代写法 break-before: page 在 Chrome ≥ 90、Firefox ≥ 65、Safari ≥ 15.4 中稳定支持；但旧版 Chrome（≤ 89）、Safari（≤ 14.1）只认 break-before: always，而某些 PDF 导出工具（如 wkhtmltopdf 0.12.x）甚至只识别已废弃的 page-break-before。
- 生产环境建议三连写，让不同环境 fallback：
page-break-before: always; break-before: always; break-before: page; - 避免只写
page-break-before：新项目维护成本高，且 Edge/Chrome 新版本已明确标记其为 deprecated - 别混用冲突值，比如
page-break-before: avoid和break-before: page同时存在，以break-before为准
真正难的不是加哪行 CSS，而是判断「该不该分」——比如给每个 <section></section> 都加 break-after: page，最后一页必然大片留白；而 break-inside: avoid 只是提示，内容塞不下时浏览器照切不误。这些边界情况，得靠打印预览反复试，不能只信文档里的“avoid”字面意思。
