多列布局中内容被切断是默认行为，需用break-inside: avoid、column-span: all和column-fill: auto等css干预；前者需块级元素且父容器启用多列，后者改变填充顺序提升可读性。
多列布局里内容被硬生生切开（比如段落中间断成两半、图片被劈成上下两截），不是浏览器 bug，而是默认行为——它优先填满列高，不考虑语义完整性。要让它“懂点事”，得靠几个关键 CSS 声明主动干预。
break-inside: avoid 为什么常失效
你写了 break-inside: avoid 却发现 <p></p> 还是被拆开了？常见原因有三个：
- 父容器没启用多列（即没设
column-count或columns），该属性只在多列上下文中生效 - 目标元素是替换元素（如
<img>、<iframe></iframe>），break-inside对它们无效 - 用了
display: inline或display: table等非块级显示模式，它只对块级元素起作用
实操建议：给段落加 display: block（确保是块级），再配 break-inside: avoid；图片则需包裹一层 <div> 并对该容器应用该声明。
<h3>column-span: all 的兼容性陷阱</h3>
<p><code>column-span: all 能让标题横跨所有列，但容易卡在两个地方：
- 父容器必须是启用了多列的块级元素（
display: block+column-count），不能是inline或flex容器 - 该元素自身不能有
float、position: absolute或position: fixed，否则声明被忽略 - 部分旧版 Safari 需要
-webkit-column-span: all前缀，且仅支持<h1>–<h6></h6> </h1>和<p></p>（不支持<div> 直接使用） <p>稳妥写法：用 <code><h2 class="section-title"></h2>，CSS 中写.section-title { column-span: all; display: block; }，并补上前缀。column-fill: auto 改变内容流向逻辑
默认
column-fill: balance会让各列高度尽量一致，但代价是内容可能在首列堆满后才开始填第二列——导致前几列很长、后几列很短，阅读节奏被打乱。换成
column-fill: auto后，内容按顺序从左到右逐列填充，更接近传统文本流。这对长篇文章或带大量短段落的内容更友好。- 适用场景：博客正文、新闻稿、文档类页面
- 副作用：列高差异可能变大，尤其当容器高度受限时
- 注意：它和
break-inside: avoid配合使用效果更稳——避免某一段因列高不足被强拆
真正影响阅读平滑度的，往往不是列数或间距，而是断点控制粒度：一个
break-inside: avoid没生效，可能是因为它套在了<span></span>上；一个column-span不起作用，大概率是父容器悄悄用了display: flex。多列布局的“平滑”，本质是层层约束下的妥协结果，不是开个开关就能自动对齐的。
