break-inside: avoid 必须加在不可分割的语义单元（如.card、<figure>、<blockquote>）自身上，且该元素需为多列容器的直接子块级元素；加在列容器或内联子元素上无效。
break-inside: avoid 加在哪一层才真正起作用
必须加在「你不想被拆开的那个完整语义单元」的直接父元素上，比如 .card、<figure>、<blockquote>。它对多列容器本身（如设了 column-count: 3 的 .columns）无效，对内联子元素（如 <img> 或 <p>）也基本无效。
✅ 正确：.card { break-inside: avoid; }——前提是 .card 是多列容器的直接子元素，且 display: block
❌ 错误：.columns { break-inside: avoid; }——容器不是被分列的内容，该声明无意义
❌ 错误：img { break-inside: avoid; }——<img> 默认是 inline-level 替换元素，需先设 display: block
立即学习“前端免费学习笔记（深入）”；
为什么加了 break-inside: avoid 还是被截断
失效通常不是语法写错，而是底层约束没满足：
- 父容器没启用真正的多列：仅靠
display: grid或float模拟列，break-inside不触发 - 目标元素用了
display: flex或display: grid——浏览器直接忽略该属性，即使视觉上是个卡片 - 元素本身是
inline-block、float或绝对定位，破坏了块格式化上下文 - Firefox 下漏写了
page-break-inside: avoid，导致打印或 PDF 导出时仍断裂
哪些元素必须加 break-inside: avoid
不是所有块都要加，只加语义上「不可分割」的容器：
-
<figure>+<figcaption>：图与说明必须共存，劈开会丢失上下文 -
<blockquote>：引文一旦跨列，原意极易被曲解 - 自定义卡片（如
<div class="card">）：尤其用于打印 WiFi 卡、课程卡片等实物输出场景 -
<ul>或<ol>容器本身：防止列表项散落在不同列（注意不是给<li>加）
避免加在 <p> 或 <h2> 上——段落本就该断行，标题默认是块级且无子内容，断裂风险极低。
兼容性与移动端注意事项
现代浏览器中 break-inside: avoid 在 Chrome 50+、Firefox 68+、Safari 11.1+ 支持良好，但 Safari ≤15.6 对多列场景支持不稳定，建议始终搭配 page-break-inside: avoid。
不用单独写 avoid-column 或 avoid-page——avoid 已覆盖两者语义，且更简洁。
移动端慎用：小屏常为单列，break-inside 几乎无效果，还可能因渲染路径差异引发布局闪动。
调试时打开 DevTools Layout 面板，勾选 “Show column boundaries”，直接观察断裂点是否落在你加了 break-inside: avoid 的元素边界上。
真正容易被忽略的是高度约束：如果一个 .card 高度超过单列可用空间，浏览器会把它整体推到下一列，可能导致列高严重不均甚至留白——这不是 bug，是 break-inside 的设计行为。它只管“不断”，不管“排得匀”。
