内容被截断在页面中间时，应优先使用break-before: page强制分页，仅在必须新开页处（如章节标题前）设置；避免滥用break-after: page导致末页留白，并对表格行<tr>或Flex/Grid子项设置break-inside: avoid防止内部断开。
打印时内容被截断在页面中间怎么办
直接用 break-before: page 或 break-after: page 强制分页，是最简单有效的解法。但别急着全加——浏览器对这两个属性的解析有明确优先级：当同一元素同时声明了 break-before 和 break-after，break-before 会优先生效；如果父元素和子元素都设置了分页控制，子元素的声明会覆盖父元素（除非父元素用了 break-inside: avoid 这类更强势的规则）。
常见错误是给每个 <section> 都加 break-after: page，结果最后一页留白严重。实际应只在「必须新开一页」的位置用 break-before: page，比如报告封面、章节标题前。
哪些值真正可用，哪些只是摆设
break-before 和 break-after 的合法值包括 auto、avoid、page、column、region，但打印场景下只有 page 和 avoid 稳定生效。column 仅在多列布局中起作用，region 几乎无浏览器支持；avoid 表示「尽量不让分页符出现在这里」，但它不是强制约束——如果内容实在塞不下，浏览器仍会截断。
-
break-before: page：强制在元素前插入分页符（适合章节标题） -
break-after: page：强制在元素后插入分页符（适合封底、附录末尾） -
break-inside: avoid：防止元素内部被分页（适合卡片、表格行，但对<table>整体无效，需作用于<tr>）
表格和 Flex/Grid 容器里的分页陷阱
表格默认会在行间断开，但整张表被截成两半很常见。解决方法不是给 <table> 加 break-inside: avoid（它会被忽略），而是给每个 <tr> 设置 break-inside: avoid，再配合 page-break-inside: avoid（兼容旧版 Chrome/Edge）。Flex 和 Grid 容器也有类似问题：子项即使设了 break-inside: avoid，父容器若未设置 break-inside: avoid，仍可能在子项之间分页。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 表格：对
<tr>同时写break-inside: avoid和page-break-inside: avoid - Flex 容器：父容器加
break-inside: avoid，子项再加break-inside: avoid - 避免在
<div style="display: grid">上直接设break-after，优先用语义化标签如<article>或<section>包裹后再控制
Chrome 和 Firefox 打印预览表现不一致怎么调
Firefox 对 break-before 支持更严格，有时会多分一页；Chrome 则倾向压缩内容，导致 avoid 失效。调试时务必在两个浏览器里打开打印预览（Ctrl+P），不要只看页面渲染效果。一个可靠技巧是临时加一条 debug 规则：@media print { * { outline: 1px dashed red !important; } }，能直观看到哪些元素被分页符切开了。
容易被忽略的一点：CSS 中使用 rem 或百分比高度的容器，在打印时高度计算可能失效，导致 break-inside: avoid 判定失准。稳妥做法是给关键区块设固定 min-height（如 min-height: 20cm），再配合分页控制。
