page-break-before: always 更稳因其是经长期验证的“硬指令”，浏览器打印引擎触发逻辑更确定，不依赖display计算路径，只要元素为块级且未脱离文档流就大概率生效；而break-before: page在chrome 115+及部分safari中存在解析延迟或忽略问题。
page-break-before: always 为什么比 break-before: page 更稳
因为 break-before: page 在 Chrome 115+ 和部分 Safari 版本中仍存在解析延迟或忽略行为，而 page-break-before: always 是经过长期验证的“硬指令”，浏览器打印引擎对其触发逻辑更确定。它不依赖 display 计算路径，只要元素是块级、未脱离文档流，就大概率生效。
实操建议：
- 统一用 page-break-before: always !important，避免被框架样式（如 Ant Design 的 .ant-table）覆盖
- 不要写在 <span></span> 或 <a></a> 上——它们默认是内联元素，需先加 display: block
- 如果目标元素是 flex 子项或 grid 项，把它挪到容器外，或改用空 <div style="page-break-before: always;"></div> 插入在兄弟节点之间
表格跨页断裂时，break-inside: avoid 为什么无效
规范明确要求：对 <table> 元素直接设 <code>break-inside: avoid 是无效行为。浏览器会把整张表当作原子单元处理，要么全留本页，要么全推下一页——不是 bug，是标准设计。
实操建议：
- 想让长表分页：拆成多个独立 <table>，每个带完整 <code><thead>，中间插 <code><div style="page-break-before: always;"></div>
- 想保留表头：给 <thead> 加 <code>display: table-header-group，再配合 @media print { thead { break-after: avoid; } }
- 紧急兜底：给 <tr> 同时写 <code>break-inside: avoid 和 page-break-inside: avoid，并确保 display: table-row
@media print 里哪些样式必须加 !important
不是所有样式都需要，但三类关键规则一旦被覆盖，打印就彻底失控：隐藏非内容区、重置布局、强制分页。它们常被全局 CSS 或组件库样式穿透覆盖。
必须加 !important 的场景：
- .no-print, header, nav { display: none !important; }
- * { float: none !important; position: static !important; }
- .section-title { page-break-before: always !important; }
- body { margin: 0 !important; }（否则浏览器“最小边距”设置会强行加白边）
调试时看不到分页效果？检查这三点
90% 的“没反应”问题其实不是 CSS 写错，而是环境没对。打印样式只在真实预览中渲染，且完全隔离于屏幕样式。
排查步骤：
- 打开 Ctrl+P / Cmd+P → 右键预览区任意元素 → “检查” → 切到 Styles 面板，确认当前元素是否命中 @media print 下的规则
- 查看 computed 样式里 page-break-before 是否为 always，而不是 auto 或被 line-through 划掉
- 如果用了 CSS-in-JS（如 Styled Components），打开 DevTools 的 Elements → <style data-styled> 标签，确认 <code>@media print</style> 块已注入且未被动态移除
实际项目里最常被忽略的，是父容器的 overflow: hidden 或 transform——它们会创建新层叠上下文，直接屏蔽所有分页指令，连 page-break-before: always 都失效。遇到死活不分页，先查最近的祖先元素有没有这类属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
