break-inside: avoid 在打印时失效，主要因它仅对块级容器生效，且要求父容器为BFC、子元素为块级；inline、flex、float、absolute元素及tr/td/li等均不支持，需改用break-before/after或page-break-*兼容处理。
break-inside: avoid 在打印时为什么经常失效？
break-inside: avoid 在屏幕渲染中看似生效，但打印预览里元素仍被强行截断——这通常不是属性写错了，而是它只对「块级容器」起作用，且依赖父容器的显示类型和分页上下文。
常见错误现象：display: inline 或 display: flex 的直接子元素上设 break-inside: avoid，实际无效；float 元素、position: absolute 元素也不受该属性约束。
使用场景需注意：
- 父容器必须是块格式化上下文（BFC），推荐用
display: block或display: flow-root - 子元素需为块级（如
div、p、section），不能是span之类内联元素 - 打印媒体查询中必须显式声明，否则样式不触发
@media print {
.invoice-item {
break-inside: avoid;
}
}哪些元素必须配合 break-before / break-after 使用？
break-inside: avoid 对表格行（tr）、列表项（li）、表格单元格（td、th）完全无效。这些结构需要改用 break-before: avoid 或 break-after: avoid 控制分页位置。
立即学习“前端免费学习笔记（深入）”；
例如防止表格跨页断裂：
- 给
tr加break-before: avoid（部分浏览器支持） - 更可靠的做法：给每个
tr外包一层div，再对这个div应用break-inside: avoid - 或者将整张表包裹在
div中，并设置page-break-inside: avoid（兼容性更好，尤其在旧版 Chrome 和 Edge）
性能影响较小，但滥用 break-before: always 会导致大量空白页，建议仅在关键标题（如 h2.section-title）前插入强制分页。
print 媒体查询中 page-break-* 和 break-* 属性怎么选？
CSS 打印分页有两套语法：老式 page-break-<em></em>（page-break-inside、page-break-before）和现代 break-（break-inside、break-before）。它们不是简单替代关系。
关键差异：
-
page-break-inside: avoid在 Safari 和旧版 Edge 中支持更稳定，但已被标记为弃用 -
break-inside: avoid是 CSS Fragmentation Module Level 3 标准，Chrome 99+、Firefox 100+ 支持良好，但 Safari 16.4 之前对 flex/grid 容器内无效 - 两者不可混用在同一元素上，浏览器会按规范优先级取其一（通常
break-<em></em>覆盖page-break-）
建议策略：
- 面向现代浏览器：只用
break-*系列 - 需兼容 Safari ≤16.3 或旧版 Edge：叠加声明，如
.card { page-break-inside: avoid; break-inside: avoid; }
表格、多列布局和 flex 容器里的分页陷阱
表格（table）默认是原子容器，break-inside: avoid 对整个 table 生效，但对 tbody 或 tr 无效；若想让每组数据（如每个 tbody）独占一页，得给 tbody 设 display: block，再配 break-before: always ——但这会破坏语义和样式，慎用。
Flex 容器的问题更隐蔽：
-
flex-direction: column下，子项即使设了break-inside: avoid，也可能因 flex 布局的弹性收缩而被压缩到一页末尾再截断 - 解法：临时切换为
display: block+margin模拟间距，或用break-after: avoid控制上一项结尾
多列布局（column-count）中，break-inside: avoid 只控制是否跨列，不控制跨页；要防跨页，得在外层加 break-after: avoid 或用 page-break-inside: avoid。
打印样式调试时，别只看浏览器“打印预览”，务必导出为 PDF 实测——某些分页行为（尤其是跨页边框、背景）在预览里正常，PDF 里却错位。
