break-before: page 仅对块级盒生效，且受祖先元素 overflow、transform、filter 干扰而静默失效；须用于 div/section/h1 等块级标签，置于 @media print 中，并兼容写 page-break-before: always。
break-before: page 为什么加了没反应
不是写错了，而是它只对「块级盒」起作用，且极易被祖先元素干扰。一旦父容器有 overflow: hidden、transform、filter，分页指令就会被静默忽略——浏览器根本不会尝试分页。
实操建议：
- 目标元素必须是
<div>、<code><section></section>、<h1></h1>这类天然块级标签，别用在<span></span>或内联样式上 - 确保
break-before: page写在@media print块里，不混在普通 CSS 中 - Firefox 对该属性更保守，可双写：
break-before: page; page-break-before: always; - 如果仍无效，把规则挪到前一个兄弟元素末尾，改用
break-after: page，某些布局下反而更稳定 - 想让整表不跨页：在外层
<div> 上设 <code>break-inside: avoid - 想让长表分页并保留表头：拆成多个独立
<table>，每个带完整 <code><thead>，中间插 <code><div style="break-before: page"></div> - 必须保留在单个
<table> 内？给 <code><thead> 加 <code>display: table-header-group，再给每个<tr> 同时写 <code>break-inside: avoid和page-break-inside: avoidbreak-before 和 break-after 的优先级怎么算
两者同时存在时，
break-before优先生效；父子都设了，子元素的声明会覆盖父元素——除非父元素用了更强势的break-inside: avoid。常见错误：
- 给每个
<section></section>都加break-after: page，导致末页严重留白 - 在最后一个元素上滥用
break-after: page，但它后面没内容，浏览器可能直接忽略 - 在
position: absolute或float元素上设break-before: page，必然失效 - 真正关键的不是“怎么加”，而是“加在哪”——分页锚点必须落在有后续内容、且自身未脱离文档流的位置
哪些值真能用，哪些只是摆设
打印场景下，只有
page和avoid稳定生效。column仅在多列布局中起作用，region几乎无浏览器支持；avoid是软约束——内容实在塞不下时，浏览器仍会截断。推荐组合：
-
break-before: page：适合章节标题、报告封面等“必须新开一页”的位置 -
break-after: page：适合封底、附录末尾等“必须结束一页”的位置 -
break-inside: avoid：防止卡片、<tr> 等内部被切开，但对 <code><table> 整体无效 <li>Safari 15.4 之前不支持 <code>break-inside: avoid，需双写：break-inside: avoid; page-break-inside: avoid;
最常被忽略的点：分页控制不是加在“要分页的地方”，而是加在“分页后第一块内容”的开头；空
<div> 插在章节前，比绞尽脑汁给标题加样式更可靠。</div> - 给每个
表格跨页断裂怎么修
break-inside: avoid 直接写在 <table> 上基本无效——这不是 bug，是规范行为。浏览器会把整张表当不可分割单元处理，结果要么溢出一页，要么硬塞进下一页留大片空白。
<p>实操建议：</p>
<ul><li>不要给 <code><table> 设 <code>break-inside: avoid
