page-break-before/after/inside 无效的根本原因是仅对块级元素生效，且受父容器 display、overflow、float 等属性影响；应优先使用 break-before: page 等新语法，确保元素为 display: block，并在 @media print 中独立声明、加 !important，PDF 导出时需设固定高度并避免 absolute/transform。
page-break-before/after/inside 在打印时为什么无效
常见现象是加了 page-break-before: always 却没分页，或者分页位置和预期完全不符。根本原因不是写法错，而是这些属性只对「块级元素」生效，且受父容器的 display 类型、overflow、float 等影响极大。比如 display: inline 或 display: flex 容器里的子元素，page-break-inside: avoid 直接被忽略。
实操建议：
- 确保目标元素是块级（如
div、p、section），必要时显式加display: block - 避免在
flex或grid容器内直接对子项用page-break，改用break-before: page（CSS Fragmentation Level 3）更可靠 - 检查父元素是否设置了
overflow: hidden或transform，这些会创建新的层叠上下文并阻断分页行为
用 @media print 写内部 style 的正确姿势
很多人把 @media print 塞进 里就以为完事，结果 Chrome 打印预览里样式不生效。问题常出在作用域和优先级：内联 style 里的 @media 规则会被浏览器当作普通 CSS 解析，但若页面有外部样式表同名规则且 !important，它可能被覆盖。
实操建议：
- 把打印专用样式放在
中独立的标签里，不要混在组件级style中 - 关键分页规则加
!important，例如page-break-before: always !important，防止被框架默认样式干扰 - 测试时务必用真实打印预览（Ctrl+P），不能只靠 DevTools 的「Print emulation」，后者对
page-break模拟不全
Chrome 和 Firefox 对 break-* 属性的支持差异
page-break-* 是旧标准，break-before/break-after/break-inside 是新标准，但浏览器支持并不一致。Chrome 100+ 已基本弃用 page-break，而 Firefox 仍对 page-break-inside: avoid 支持更稳；但两者都认 break-before: page。
实操建议：
- 优先写新语法：
break-before: page，再补一行兼容旧写法：page-break-before: always - 想避免元素被拆到两页，用
break-inside: avoid，别依赖page-break-inside: avoid（Safari 15.4 之前不支持） - 表格分页最麻烦：对
table元素设break-inside: avoid无效，得对tbody或每行tr单独设break-inside: avoid
PDF 导出时分页失效的隐藏原因
用浏览器「另存为 PDF」或 Puppeteer 生成 PDF 时，明明打印预览分页正常，导出后却全挤在一页。这不是 CSS 问题，而是 PDF 渲染引擎（如 Chromium 的 PDF backend）对分页指令的解析粒度更粗，尤其对高度动态计算的元素（如含 JS 渲染内容、未设固定 height 的容器）容易误判。
实操建议：
- 给要分页的区块设明确
min-height: 90vh或固定像素值，减少渲染时高度浮动 - 避免在分页元素内使用
position: absolute或transform，这些会让 PDF 引擎丢失布局上下文 - Puppeteer 用户注意：
printOptions中开启preferCSSPageSize: true，否则它默认按 A4 物理尺寸裁切，无视 CSS 中的@page设置
真正卡住人的，往往是父容器的 display 类型和 PDF 导出时的 layout reflow 时机——这两个点不排查清楚，调一百遍 break-before 都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
