break-before: page 仅对块级元素生效且依赖文档流，父容器设 overflow: hidden 等会创建新层叠上下文而屏蔽该指令；需置于 @media print 中，优先用 page-break-before: always 并加 !important，调试须通过浏览器打印预览检查样式是否命中。
break-before: page 为什么加了没反应
不是语法写错，而是它只对块级元素生效，且依赖完整的文档流。一旦父容器设了 overflow: hidden、transform 或 filter，就会创建新层叠上下文，直接屏蔽分页指令。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标是
<div>、<section>这类原生块级标签，别用在<span>或内联样式上 - 必须放在
@media print块里，否则开发时完全看不到效果 - 如果仍无效，把
break-before: page挪到前一个兄弟元素末尾，改用break-after: page—— 某些场景下更稳定 - Firefox 对
break-before更保守，可双写兼容：break-before: page; page-break-before: always;
表格跨页断裂怎么修
break-inside: avoid 对 <table> 本身基本无效——这是规范行为，不是 bug。浏览器会把整张表当做一个不可分割单元，结果要么全挤在一页（导致溢出），要么硬塞进下一页（留大片空白）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要给
<table>直接设break-inside: avoid - 想让表格整体不跨页：在外层
<div>上设break-inside: avoid - 想让长表格分页并保留表头：拆成多个独立
<table>，每个带完整<thead>，中间插<div style="break-before: page"></div> - 必须保留在单个
<table>内？给<thead>加display: table-header-group，再给每个<tr>同时写break-inside: avoid和page-break-inside: avoid
page-break-before: always 比 page-break-after: always 更可靠
page-break-after: always 是“建议性”指令，浏览器只在元素后面有内容可承接、且该元素未脱离文档流时才可能触发。一旦它是页面最后一个块，或用了 position: absolute、float、flex 子项，就大概率静默失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
page-break-before: always打头，语义清晰、触发确定 - 给章节标题加：
.chapter h1 { page-break-before: always; } - 两个报表区块之间插一个空
<div style="page-break-before: always;"></div>，比给上一个区块加after更干净 - 关键规则建议加
!important，例如：page-break-before: always !important;，防止被框架或外部样式覆盖
调试打印分页必须用真实预览
打印样式对屏幕渲染完全无效，所有判断都得靠 Ctrl+P / Cmd+P 打开浏览器打印预览后右键检查。很多问题不是代码错，而是样式没命中或被覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开打印预览 → 右键 → “检查” → 切到 Styles 面板，确认当前选中元素是否应用了
@media print下的规则 - 检查是否误用了
display: none或visibility: hidden—— 这些会让内容彻底不出现在打印输出中 - 如果用了 CSS-in-JS（如 Emotion、Styled Components），确认
@media print规则已注入到<head>，且未被动态移除 - PDF 导出工具（如 wkhtmltopdf）对
break-*支持极弱，测试时务必用原生浏览器打印预览，而非截图或 PDF 插件
真正难的不是写哪条属性，而是判断这个分页锚点是否落在有后续内容、且自身未脱离文档流的位置。空 <div> 插在章节开头，比绞尽脑汁给标题加样式更可靠。
