break-inside: avoid 仅在多列布局（column-count/column-width）或打印流中生效，需作用于直接子块级容器（如 display: block），且避免 overflow/position/transform 等干扰；safari 需加 -webkit 前缀，flex/grid 中无效。
break-inside: avoid 不是万能胶，它只在特定上下文里起作用——写对了但没生效，大概率是环境没配齐。
为什么加了 break-inside: avoid 还是被截断
这不是 CSS 写错了，而是浏览器根本没进入“可响应断列/分页”的状态：
- 父容器没设
column-count或column-width—— 这个属性只在多列流中激活，Flex/Grid/float 模拟列完全无视它 - 目标元素是
display: inline-block、flex或grid容器 —— 它必须是触发 BFC 的块级元素，比如display: block或display: flow-root - 目标元素加了
position: absolute、float或overflow: hidden—— 这些会破坏分列/分页上下文，导致声明被跳过 - 加在
<img>或<p></p>上，而不是它的直接父容器（如<figure></figure>或<div class="card">）—— 内联元素不响应该声明，得先转成块级 <li>Safari ≤15.6 下必须补 <code>-webkit-column-break-inside: avoid，否则静默失效 - ✅ 正确：
.card { break-inside: avoid; }（前提是.card是column-count容器的子元素，且display: block） - ❌ 错误：
.columns { break-inside: avoid; }（列容器不是被分的内容，加了等于没写） - ❌ 错误：
img { break-inside: avoid; }（<img>默认是内联替换元素，得先加display: block） - ⚠️ 注意：
<figure></figure>、<blockquote></blockquote>、<section></section>这类原生块级语义容器可以直接加；但别给每个<p></p>都加——段落本就该断行 - 多栏布局（网页显示）：
break-inside: avoid;+break-before: avoid;+break-after: avoid;组合更可靠，防连带切断 - 打印导出（PDF/wkhtmltopdf）：
@media print { .card, figure, table { break-inside: avoid-page; } } - Safari 兼容写法：
break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;（仅作降级，非主力） - 表格需额外处理：
thead { display: table-header-group; }才能保证表头每页重现 - 必须为每个卡片子项单独加：
.card { display: block; break-inside: avoid; } - 干扰项会直接让声明失效：
overflow: hidden、transform、position: absolute三者任一存在，分页逻辑就断了 - 更稳妥的做法：在
@media print中把 Flex 容器降级为display: block，再统一控制子项 - 避免用
gap，改用margin-bottom——gap在页尾可能放大间距，把下一个子项硬挤到下一页
break-inside: avoid 必须加在哪一层
只加在你要保护的语义单元自身上，且它得是多列容器或打印流的**直接子块级容器**：
打印和多栏要分开处理，不能只靠一个声明
break-inside: avoid 控制多栏断点，page-break-inside: avoid 已基本失效；现代打印场景必须用 break-inside: avoid-page 并包裹在 @media print 中：
Flex/Grid 布局里它根本不起作用
给 display: flex 容器加 break-inside: avoid 完全无效——flex 子项不是块级盒，浏览器不检查它们的分页声明：
最常被忽略的一点：break-inside: avoid 只保证“不切”，不解决“放不下”。如果卡片高度远超单列可用空间或 A4 页面剩余高度，浏览器会把它整体推到下一列/页，造成大片留白甚至空列——这不是 bug，是规范允许的降级行为。
