如何用CSS避免打印内容被分页截断？

break-inside: avoid 仅对参与文档流的块级元素在多列或打印上下文中生效，需加在直接子块级容器上并配合 @media print 使用。

直接用 break-inside: avoid，但必须加在正确元素上、配合正确上下文，否则等于没写。

为什么加了 break-inside: avoid 还是被截断

不是属性写错了，而是浏览器根本没把它当回事——它只对参与文档流的块级元素生效，且只在特定布局上下文中起作用。

1. break-inside: avoid 在多列布局（column-count 或 column-width）中才激活，Flex/Grid/float 模拟的“列”完全无视它
2. 目标元素要是 display: block 或 display: flow-root；inline-block、flex、grid 容器本身不响应该声明
3. position: absolute、float、overflow: hidden 会破坏分页上下文，导致声明静默失效
4. 加在 <img> 或 <p> 上无效：内联元素不响应该属性，得先设 display: block
5. Safari ≤15.6 需补 -webkit-column-break-inside: avoid，否则不生效

break-inside: avoid 必须加在哪一层

只加在你要保护的语义单元自身上，且它得是打印流或列容器的直接子块级容器。

1. ✅ 正确：.card { break-inside: avoid; }（前提是 .card 是 @media print 下的块级子元素）
2. ❌ 错误：.grid { break-inside: avoid; }（Grid 容器不是被分的内容，加了没用）
3. ❌ 错误：tr { break-inside: avoid; }（<tr> 不是块级元素，需额外设 display: block 或改用 page-break-inside: avoid）
4. ⚠️ 注意：<figure>、<section> 这类原生块级语义标签可直接加；但别给每个 <p> 都加——段落本就该自然断行

表格和 Grid 容器里的特殊处理

表格和 Grid 的子项默认不继承分页控制，浏览器只检查块级子元素，而 tr 和 grid-item 都不是标准块级流元素。

1. 表格：别给 <table> 加 break-inside: avoid（会被忽略），应给每个 <tr> 加 break-inside: avoid + page-break-inside: avoid（兼容旧版 Chrome/Edge）
2. Grid：必须给每个 grid-item 单独加 break-inside: avoid，并显式设 display: block；gap 和 fr 单位在打印中不可靠，建议设 gap: 0 并用 margin 替代
3. 绝对定位元素：删掉 position: absolute，换成 position: relative 再加 break-inside: avoid；若必须保留 absolute，则在外层套一个流式 <div> 并把分页控制加在 wrapper 上

现代打印必须用 @media print + 特性检测

不能只靠一个声明打天下，page-break-inside 已弱化，但仍是 Safari 16.4 以下唯一可用 fallback。

1. 必须包裹在 @media print 中，否则无效
2. 推荐用 @supports 隔离规则：@supports (break-inside: avoid) 用新语法，@supports not (break-inside: avoid) 降级为 page-break-inside: avoid
3. 避免给整个 <main> 加 break-inside: avoid——内容超长时会导致空白页堆积；只在真正需要“原子完整”的卡片、报告节、表格行等粒度上控制

最容易被忽略的是上下文：break-inside 不是全局开关，它依赖父容器是否进入分页模式、目标元素是否处于流内、是否为块级——三者缺一不可。调试时先确认 Chrome 打印预览里是否启用了 “Emulate CSS media: print”，再逐层检查 computed styles 中该属性是否被标记为 active。