break-before: page 失效主因是仅对块级元素生效，且受父容器overflow: hidden、transform等新层叠上下文干扰；需确保在@media print中双写break-before: page和page-break-before: always，并作用于语义化块级标签如。
break-before: page 为什么加了没反应
多数时候不是写错了，而是它根本没生效条件。break-before 只对块级盒（block-level box）起作用，且父容器不能有 overflow: hidden、transform、filter 这类触发新层叠上下文的属性——它们会截断分页上下文。
常见失效场景：
- 目标元素是
span或inline元素，没显式设display: block - 写在普通 CSS 里，没包裹在
@media print中，被其他样式覆盖 - 用在
flex或grid容器的直接子项上，浏览器忽略该声明 - Firefox 对
break-before更保守，有时得配合break-after: page放在前一个兄弟元素末尾才稳定
page-break-before 和 break-before 到底该用哪个
两个都得写，不是二选一。虽然 break-before 是 CSS Fragmentation Level 3 的新标准，但 page-break-before 在旧版 Chrome/Edge 和部分 PDF 导出工具中仍是唯一可靠入口。
实操必须双写：
立即学习“前端免费学习笔记（深入）”；
@media print {
.chapter-title {
break-before: page;
page-break-before: always;
}
}
注意点：
-
break-before: page在现代浏览器中优先级更高，但 Firefox 对它的支持仍弱于page-break-before: always -
page-break-before: avoid在 Chrome/Firefox/Safari 中行为不一致，基本不可靠；只推荐用always或auto - 不要用
left/right值——仅 IE 支持，其他主流浏览器已弃用
表格分页时 break-inside: avoid 为啥无效
不是你写错了，是规范如此：<table> 元素本身会忽略 <code>break-inside: avoid，这是所有浏览器的统一行为，不是 bug。
真正有效的做法是下沉到行级：
@media print {
tr {
break-inside: avoid;
page-break-inside: avoid;
}
}
补充要点：
- 仅对
<tr> 生效，对 <code><td> 或 <code><th> 加无效 <li>如果表格太长必须分页，别硬撑，考虑拆成多个语义化小表，每张表前加 <code>break-before: page - Safari 对
break-inside支持最弱，必要时降级为手动插入空<div class="page-break"></div>并设page-break-before: always -
break-before: page是强制新开页的唯一稳定手段，auto和avoid都只是建议，浏览器可无视 -
avoid不是“禁止”，只是“尽量不”——内容塞不下时，照样截断 -
break-before: always不存在，合法值只有page；写always会被当成无效声明
哪些值真能用，哪些只是摆设
打印场景下，只有 page 和 avoid 是实际可用的值；其他如 column、region、recto、verso 几乎无浏览器支持，写了也白写。
关键差异：
复杂点在于：分页逻辑受祖先元素影响极大，且不同浏览器对同一规则的解析顺序不同。最保险的做法，是把分页控制收束到语义明确的块级容器（如 <section></section>、<article></article>），而不是在任意 div 上乱加。
