page-break-* 在现代浏览器中已基本失效，必须改用 break-before/after/inside 并确保元素处于标准文档流中；其失效源于规范淘汰与布局上下文限制双重作用。
直接说结论：page-break-before、page-break-after 和 page-break-inside 在现代浏览器（Chrome 80+、Firefox 90+、Edge 100+）中已基本失效，不是你写错了，而是规范淘汰 + 布局上下文限制双重作用的结果。必须改用 break-before、break-after、break-inside，并确保元素处于标准文档流中。
为什么 page-break-* 在打印预览里完全没反应
这不是 bug，是 CSS 规范演进导致的兼容断层。Chrome 从 v80 起默认忽略 page-break-*，Firefox 对它的支持也仅限于最简单的块级流内场景；更关键的是，只要父容器用了 display: flex、display: grid、float 或 overflow: hidden，这些旧属性就直接被跳过。
- 检查目标元素是否为
display: block（span、inline元素上加page-break-after: always必然无效） - 确认其父容器没有
transform、filter、will-change—— 这些会创建新层叠上下文，阻断分页计算 - 避免在响应式框架（如 Bootstrap 的
.row、Ant Design 的Flex）内部直接写page-break，它们大概率是flex容器 - 若必须兼容 IE，
page-break-*是唯一选择，但需接受分页不可控——IE 本身就不支持现代分页语义
break-before: page 不生效的三个硬性前提
break-before: page 看似简单，实际生效依赖三个不可妥协的条件：元素必须是块级盒、必须在文档流中、不能被祖先截断分页上下文。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 显式声明
display: block（哪怕它本就是div，某些 CSS 重置或框架样式可能覆盖了它） - 移除所有
float：浮动元素脱离文档流，break-before失去锚点；改用display: flow-root替代 - 在
@media print中独立声明，并加!important（防止被组件级样式或 CSS-in-JS 覆盖） - Firefox 对
break-before解析更保守，若仍不触发，可尝试在前一个兄弟元素末尾加break-after: page作为替代路径
表格分页失效的根本原因和解法
table 元素天生无视 break-inside: avoid，这是规范行为——浏览器把整张表当作原子单元处理。给 table 加 break-after: page 也没反应，因为分页逻辑只作用于 tr 级别，而 tr 又不允许跨页断裂。
- 不要给
<table> 直接设分页属性；改用外层 <code><div class="print-table-page"> 包裹，再对这个 <code>div设break-inside: avoid - 若表格太长必须分页，拆成多个独立
<table>，每个配一个重复 <code><thead>，并在它们之间插入 <pre class="brush:php;toolbar:false;"><div style="break-after: page"></div> </pre> <li>对 <code><tr> 同时设 <code>break-inside: avoid和page-break-inside: avoid（后者兼容旧版 Chrome/Edge） - Safari 对
break-inside支持不稳定，建议用@supports (break-inside: avoid)做特性检测，fallback 到page-break-inside: avoid - 不要依赖 CSS 控制 Word 分页；改用库提供的原生 API（如 docxtemplater 的
{#pageBreak}，或 docxgenjs 的addPageBreak()） - 如果必须走 HTML 渲染路径，用
<div style="page-break-before: always;"></div>（注意：是旧属性，不是新语法），部分轻量库只认这个 - 避免在 Word 导出 HTML 中使用
position: absolute、transform或复杂表格嵌套，这些结构在 OOXML 转换中极易丢失分页上下文
导出 Word 时分页符消失的真相
前端生成 .docx 文件时，break-before: page 几乎必然失效——因为 Word 的分页符是 OOXML 中的 <br w:type="page">，而绝大多数 HTML-to-Word 库根本不解析 CSS 分页属性，或者只识别旧式的 page-break-before: always。
真正棘手的从来不是“怎么写分页”，而是“谁在控制分页上下文”。浮动、弹性布局、层叠上下文、表格语义、导出引擎……每层抽象都在悄悄吃掉你的分页指令。越想靠一行 CSS 解决问题，越容易掉进浏览器和工具链的隐式规则陷阱里。
