内容被截断在页面中间时，应优先使用break-before: page强制分页，仅在必须新开页处（如章节标题前）设置；避免滥用break-after: page导致末页留白，并对表格行或flex/grid子项设置break-inside: avoid防止内部断开。
打印时内容被截断在页面中间怎么办
直接用 break-before: page 或 break-after: page 强制分页，是最简单有效的解法。但别急着全加——浏览器对这两个属性的解析有明确优先级：当同一元素同时声明了 break-before 和 break-after，break-before 会优先生效；如果父元素和子元素都设置了分页控制，子元素的声明会覆盖父元素（除非父元素用了 break-inside: avoid 这类更强势的规则）。
常见错误是给每个 <section></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> 整体无效，需作用于 <code><tr>）<h3>表格和 Flex/Grid 容器里的分页陷阱</h3> <p>表格默认会在行间断开，但整张表被截成两半很常见。解决方法不是给 <code><table> 加 <code>break-inside: avoid（它会被忽略），而是给每个<tr> 设置 <code>break-inside: avoid，再配合page-break-inside: avoid（兼容旧版 Chrome/Edge）。Flex 和 Grid 容器也有类似问题：子项即使设了break-inside: avoid，父容器若未设置break-inside: avoid，仍可能在子项之间分页。实操建议：
- 表格：对
<tr> 同时写 <code>break-inside: avoid和page-break-inside: avoid - Flex 容器：父容器加
break-inside: avoid，子项再加break-inside: avoid - 避免在
<div style="display: grid"> 上直接设 <code>break-after，优先用语义化标签如<article></article>或<section></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），再配合分页控制。
- 表格：对
