break-inside: avoid 仅对参与文档流的块级元素在多列或打印上下文中生效，需加在直接子块级容器上并配合 @media print 使用。
直接用 break-inside: avoid，但必须加在正确元素上、配合正确上下文，否则等于没写。
为什么加了 break-inside: avoid 还是被截断
不是属性写错了，而是浏览器根本没把它当回事——它只对参与文档流的块级元素生效，且只在特定布局上下文中起作用。
-
break-inside: avoid在多列布局（column-count或column-width）中才激活，Flex/Grid/float 模拟的“列”完全无视它 - 目标元素要是
display: block或display: flow-root；inline-block、flex、grid容器本身不响应该声明 -
position: absolute、float、overflow: hidden会破坏分页上下文，导致声明静默失效 - 加在
<img alt="如何用CSS避免打印内容被分页截断？" >或<p></p>上无效：内联元素不响应该属性，得先设display: block - Safari ≤15.6 需补
-webkit-column-break-inside: avoid，否则不生效
break-inside: avoid 必须加在哪一层
只加在你要保护的语义单元自身上，且它得是打印流或列容器的**直接子块级容器**。
- ✅ 正确：
.card { break-inside: avoid; }（前提是.card是@media print下的块级子元素） - ❌ 错误：
.grid { break-inside: avoid; }（Grid 容器不是被分的内容，加了没用） - ❌ 错误：
tr { break-inside: avoid; }（<tr> 不是块级元素，需额外设 <code>display: block或改用page-break-inside: avoid） - ⚠️ 注意：
<figure></figure>、<section></section>这类原生块级语义标签可直接加；但别给每个<p></p>都加——段落本就该自然断行 - 表格：别给
<table> 加 <code>break-inside: avoid（会被忽略），应给每个<tr> 加 <code>break-inside: avoid+page-break-inside: avoid（兼容旧版 Chrome/Edge） - Grid：必须给每个
grid-item单独加break-inside: avoid，并显式设display: block；gap和fr单位在打印中不可靠，建议设gap: 0并用margin替代 - 绝对定位元素：删掉
position: absolute，换成position: relative再加break-inside: avoid；若必须保留 absolute，则在外层套一个流式<div> 并把分页控制加在 wrapper 上 <h3>现代打印必须用 <code>@media print+ 特性检测不能只靠一个声明打天下，
page-break-inside已弱化，但仍是 Safari 16.4 以下唯一可用 fallback。- 必须包裹在
@media print中，否则无效 - 推荐用
@supports隔离规则：@supports (break-inside: avoid)用新语法，@supports not (break-inside: avoid)降级为page-break-inside: avoid - 避免给整个
<main></main>加break-inside: avoid——内容超长时会导致空白页堆积；只在真正需要“原子完整”的卡片、报告节、表格行等粒度上控制
最容易被忽略的是上下文：
break-inside不是全局开关，它依赖父容器是否进入分页模式、目标元素是否处于流内、是否为块级——三者缺一不可。调试时先确认 Chrome 打印预览里是否启用了 “Emulate CSS media: print”，再逐层检查 computed styles 中该属性是否被标记为 active。 - 必须包裹在
表格和 Grid 容器里的特殊处理
表格和 Grid 的子项默认不继承分页控制，浏览器只检查块级子元素，而 tr 和 grid-item 都不是标准块级流元素。
立即学习“前端免费学习笔记（深入）”；
