break-inside: avoid 仅在多列布局中生效，需父容器设 column-count/column-width，且目标元素为直接子块级容器（如 display: block），Safari≤15.6 需加 -webkit 前缀，组合 break-before/after 更可靠。
直接加 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>上，而不是它的直接父容器（如<figure>或<div class="card">）—— 内联元素不响应该声明，得先转成块级 - Safari ≤15.6 下必须补
-webkit-column-break-inside: avoid，否则静默失效
break-inside: avoid 必须加在哪一层
只加在你要保护的语义单元自身上，且它得是多列容器的**直接子块级容器**：
- ✅ 正确：
.card { break-inside: avoid; }（前提是.card是column-count容器的子元素，且display: block） - ❌ 错误：
.columns { break-inside: avoid; }（列容器不是被分的内容，加了等于没写） - ❌ 错误：
img { break-inside: avoid; }（<img>默认是内联替换元素，得先加display: block） - ⚠️ 注意：
<figure>、<blockquote>、<section>这类原生块级语义容器可以直接加；但别给每个<p>都加——段落本就该断行
Chrome 和 Safari 下更可靠的写法
单用 break-inside: avoid 在 Chrome 下可能被绕过，尤其内容高度接近列高时；Safari ≤15.6 则需要前缀和降级：
立即学习“前端免费学习笔记（深入）”；
- 组合使用三者：
break-inside: avoid; break-after: avoid; break-before: avoid;—— 防止上一张卡把当前卡“顶”出本列，或下一张卡紧贴着挤进来引发连带切断 - Safari 兼容写法：
break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; - 打印场景（如导出 PDF）必须加
page-break-inside: avoid，且建议包裹在@media print中 - 如果卡片内部含图片或表格，它们也得单独处理：
img, table { display: block; break-inside: avoid; }
最容易被忽略的一点：它不解决空间问题
break-inside: avoid 只保证“不切”，不保证“能放”。如果一列只剩 20px 高度，而卡片高 200px，浏览器会把它整个推到下一列——可能导致最后一列大片留白，甚至空列。这不是 bug，是规范行为。别指望它自动调列数或缩放内容，它只做一件事：守住完整性边界。
