break-inside: avoid 是唯一能阻止多栏中元素跨列断裂的声明，但仅对多列流中的块级直接容器生效，需配合 page-break-inside: avoid 覆盖打印场景，且不保证100%不切。
多栏布局中内容被劈开，不是 column-count 用错了，而是没告诉浏览器“哪些东西不能切”。break-inside: avoid 是唯一能真正阻止标题、图片、卡片等元素跨列断裂的 CSS 声明，但它的生效有明确前提和边界。
为什么 break-inside: avoid 有时不生效
这个属性只对「处于多列流中的块级元素」起作用。如果元素是 display: inline、flex、grid 容器，或父级已设 column-span: all，它就完全被忽略。
-
break-inside: avoid必须加在要保护的**直接容器**上，比如<figure></figure>或<blockquote></blockquote>，而不是它里面的<img> - 若该容器本身设置了
display: inline-block或float，多数浏览器会无视break-inside - 某些旧版 Safari（≤15.6）对
break-inside: avoid在多列场景下支持不稳定，需配合page-break-inside: avoid - 如果容器高度超过单列可用空间太多，浏览器可能仍会强制断裂——这不是 bug，是规范允许的降级行为
break-inside: avoid 和 page-break-inside: avoid 要不要一起写
要。二者作用域不同：break-inside 针对分栏（column-count / column-width），page-break-inside 针对打印分页。同一元素同时设置，才能覆盖网页渲染和导出 PDF（如 wkhtmltopdf）两种场景。
- 现代写法推荐：
break-inside: avoid; page-break-inside: avoid; - 不需要加
avoid-column或avoid-page——avoid已包含这两层语义 - 在 @media print 中单独再声明一次也没坏处，尤其当打印样式表独立加载时
哪些元素必须加 break-inside: avoid
不是所有块都要加，只加语义上「不可分割」的容器。典型目标包括：
-
<article></article>、<section></section>：整篇内容需保持上下文连贯 -
<figure></figure>+<figcaption></figcaption>组合：图与说明必须在一起 -
<blockquote></blockquote>：引文一旦被劈开，原意易被曲解 - 自定义卡片组件（如
.card）：尤其用于打印 WiFi 卡、课程卡片等实物输出场景 - 避免加在
<p></p>上——段落本就该可断；也不用加在<h2></h2>上，它默认是块级且无子内容，断裂风险极低
column-span: all 标题和 break-inside 的关系
column-span: all 让标题横跨所有列，但它本身不提供断裂防护。如果标题父容器没设多列，或者标题内部嵌套了 inline-flex 等布局，break-inside 依然无效。
- 确保标题的**直接父元素**启用了多列（即设了
column-count或column-width） - 标题自己不用设
break-inside，但其内部若有<span class="highlight"></span>这类行内元素包裹关键词，就不受保护——此时应把高亮逻辑移到伪元素或背景上 - 若标题后紧跟一个需整体保护的
<div class="meta">，这个 <code>meta必须单独加break-inside: avoid最常被忽略的一点：
break-inside: avoid不会改变列高计算逻辑。它只是「请求」不切，浏览器在空间紧张时仍可能违背。真要 100% 控制，就得放弃column-count，改用display: grid手动分配内容到各列——但这意味着放弃自动重排优势，得权衡。
