必须用 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，而是浏览器主动弃用了这套机制。

必须改用现代规范的 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 兼容性更好，推荐用于卡片类结构

表格分页必须作用于

，不能加在 或 加 break-before: page 或给

给

加 break-inside: avoid —— 这些操作在所有主流浏览器中都无效。表格内部元素不参与分页决策，浏览器会直接跳过。

正确做法是把分页控制上移到整个

元素，并显式设为块级：

@media print {
  table {
    display: block;
    break-inside: avoid;
  }
}

如果内容高度不可控（比如用户可增删行），更稳妥的方式是结构拆分：用

包裹每页数据，再对这个 div 设 break-before: page。

@media print 样式必须独立声明且加 !important

写了 @media print { .header { display: none; } } 却没生效？大概率是样式被覆盖了。框架注入的内联样式、组件 scoped style、甚至浏览器默认打印样式都可能压过它。

实操要点：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

• 把所有关键打印样式写在 内独立的 标签中，别混在 JS 动态插入的 style 里
• display: none、break-before、break-inside 这类关键声明必须带 !important
• 测试只信真实打印预览（Ctrl+P），DevTools 的 “Emulate media” 不触发真实分页引擎，结果不可靠

Flex/Grid 容器内子项无法直接受控，得加 wrapper

在 display: flex 或 display: grid 的父容器里，对子元素设置任何 break-* 都会被忽略——这是 CSS 分页规范明确规定的限制，不是 bug。

解决方法只有一个：用一个普通

包裹目标子项，让这个 wrapper 成为块级上下文：

<div class="grid-container">
  <div class="wrapper"><article>内容</article></div>
  <div class="wrapper"><article>内容</article></div>
</div>
<p>@media print {
.wrapper {
break-before: page;
}
}</p>

注意：wrapper 必须是块级元素（默认就是），且不能有 float、position: absolute、transform 等破坏文档流的样式，否则分页指令依然失效。

真正难处理的从来不是“怎么加分页”，而是“为什么加了没反应”——绝大多数问题都卡在浏览器已弃用旧属性、表格/弹性布局的隐式限制、或样式优先级被绕过这三个点上。盯住这三处，比堆砌更多 CSS 属性管用得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！