直接给内容元素加page-break-before常失效，因脱离文档流的元素（如absolute、float、flex子项）不参与分页计算；应改用独立空div作结构锚点，设display:block且置于@media print中，配合page-break-before:always。
为什么直接给内容元素加 page-break-before 常常失效
不是属性写错了，而是浏览器对脱离文档流的元素（比如 position: absolute、float、display: flex 子项）根本不处理分页指令。哪怕你写了 page-break-before: always，它也会被忽略——因为这些元素不在正常的分页计算路径里。
更隐蔽的问题是：给 <tr> 或 <code><td> 直接加 <code>page-break-after 也无效。CSS 规范明确禁止在表格内部单元格上使用分页属性，只允许作用于块级容器（如 <table>、<code><div>、<code><section></section>）。
- 优先把分页逻辑从“内容元素”转移到“结构锚点”，用干净的
<div> 承担分页责任<li>确保该 <code><div> 是 <code>display: block、未浮动、未绝对定位、无内边距/外边距干扰 - 不要把它塞进
flex或grid容器里——父容器的布局模式会压制分页行为
怎么写一个真正起作用的分页占位符
最可靠的方式，是在 HTML 结构中插入一个空的、语义中立的 <div>，并只在打印时生效：<pre class="brush:php;toolbar:false;"><!-- 第一页结尾 -->
</pre>
<table></table>
<div class="print-page-break"></div>
<!-- 第二页开始 -->
<h2>报表详情</h2>
<p>对应 CSS 必须包裹在 <code>@media print 中：
@media print {
.print-page-break {
page-break-before: always;
/* 不要设 height/margin/padding，否则可能撑出空白页 */
/* 不要设 visibility: hidden 或 display: none，那会让它彻底消失 */
}
}
-
page-break-before: always比page-break-after: always更可控——后者依赖“后面还有内容”，而页面末尾容易失效 - 类名不用
page-break这种泛化命名，避免被其他样式意外覆盖或复用 - 不要用
<hr>或带文字的<p></p>替代，它们可能被打印样式重置或渲染为可见内容
表格跨页时表头丢失、行被劈开怎么办
单靠 page-break-inside: avoid 对 <table> 有效，但对长表格不现实；它只是“尽量不拆”，不是“强制不分”。真正稳定的做法是组合控制：<ul><li>给 <code><table> 加 <code>break-inside: avoid（现代写法）+ page-break-inside: avoid（兜底兼容旧 Chrome）
<thead> 显式声明 <code>display: table-header-group，否则跨页时表头不会自动重复<table>，每个都带完整 <code><thead>，中间插 <code><div class="print-page-break"></div>
<li>禁用 <code>table-layout: fixed 或强制 width，否则列宽在分页后可能错乱注意：<tbody> 分组本身不能触发分页，必须配合外部 <code>div 锚点或 break-before 才能生效。
调试时为什么预览里看不到分页效果
不是代码没写，而是样式根本没命中。打印预览里的渲染树和屏幕完全不同，很多你以为“应该生效”的规则其实被覆盖或忽略。
- 打开打印预览（
Ctrl+P/Cmd+P），右键 → “检查”，选中那个分页<div>，在右侧 Styles 面板确认 <code>@media print下的规则是否启用且未被 strike-through - 检查是否误用了
@media all或@media screen，打印样式必须严格限定在@media print块内 - 如果用了 CSS-in-JS（如 Styled Components），确认
@media print规则已注入到，且未被运行时移除 - PDF 导出工具（如 wkhtmltopdf）对
break-*支持极弱，测试务必用浏览器原生打印预览，别信截图或插件生成结果
最容易被忽略的细节：@page 的 margin 设置会压缩内容区域高度，导致原本刚好一页的内容被迫换页——分页失败，八成是边距和内容高度算岔了。
