必须用 break- 替代 page-break-：Chrome 100+、Firefox 102+、Safari 16.4+ 已弃用 page-break-before/inside/after，需改用 break-before/page、break-inside: avoid（仅块级）、break-after: avoid-page；表格分页须作用于 并设 display: block；@media print 样式须独立声明且加 !important；Flex/Grid 子项需包裹块级 wrapper 才能生效。
用 break-* 替代 page-break-* 是硬性前提
Chrome 100+、Firefox 102+、Safari 16.4+ 已基本忽略 page-break-before、page-break-inside 等旧属性，尤其 avoid、left、right 值几乎全部失效。这不是你写错了选择器或漏了 !important，而是浏览器主动弃用了这套机制。
CSS
CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
下载
必须改用现代规范的 break-before、break-after、break-inside，它们在打印上下文中被稳定支持：
-
break-before: page 替代 page-break-before: always
-
break-inside: avoid 替代 page-break-inside: avoid（但仅对块级容器生效）
-
break-after: avoid-page 比 page-break-after: avoid 兼容性更好，推荐用于卡片类结构
表格分页必须作用于
，不能加在 或 给 <tr> 加 <code>break-before: page 或给 <td> 加 <code>break-inside: avoid —— 这些操作在所有主流浏览器中都无效。表格内部元素不参与分页决策，浏览器会直接跳过。 正确做法是把分页控制上移到整个 <table> 元素，并显式设为块级：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class='brush:php;toolbar:false;'>@media print {
table {
display: block;
break-inside: avoid;
}
}</pre><p>如果内容高度不可控（比如用户可增删行），更稳妥的方式是结构拆分：用 <code><div class="print-page"> 包裹每页数据，再对这个 <code>div 设 break-before: page。 @media print 样式必须独立声明且加 !important
写了 @media print { .header { display: none; } } 却没生效？大概率是样式被覆盖了。框架注入的内联样式、组件 scoped style、甚至浏览器默认打印样式都可能压过它。
实操要点：
- 把所有关键打印样式写在
<style></style> 标签中，别混在 JS 动态插入的 style 里
-
display: none、break-before、break-inside 这类关键声明必须带 !important
- 测试只信真实打印预览（Ctrl+P），DevTools 的 “Emulate media” 不触发真实分页引擎，结果不可靠
Flex/Grid 容器内子项无法直接受控，得加 wrapper
在 display: flex 或 display: grid 的父容器里，对子元素设置任何 break-* 都会被忽略——这是 CSS 分页规范明确规定的限制，不是 bug。
解决方法只有一个：用一个普通 <div> 包裹目标子项，让这个 wrapper 成为块级上下文：<pre class='brush:php;toolbar:false;'><div class="grid-container">
<div class="wrapper"><article>内容</article></div>
<div class="wrapper"><article>内容</article></div>
</div>
<p>@media print {
.wrapper {
break-before: page;
}
}</pre><p>注意：wrapper 必须是块级元素（默认就是），且不能有 <code>float、position: absolute、transform 等破坏文档流的样式，否则分页指令依然失效。
真正难处理的从来不是“怎么加分页”，而是“为什么加了没反应”——绝大多数问题都卡在浏览器已弃用旧属性、表格/弹性布局的隐式限制、或样式优先级被绕过这三个点上。盯住这三处，比堆砌更多 CSS 属性管用得多。
|
