columns属性仅控制块容器内文本流的列数或列宽切片，不改变文档流结构；columns:3表示尽量分3列，columns:150px表示每列理想宽150px，columns:2 200px等价于column-count:2且column-width:200px。
columns 本身不支持响应式断行控制、跨列标题、或内容截断保护，直接用它做“精美报纸排版”容易翻车——真要接近印刷级效果，得配合 break-inside、column-span 和字体行高微调，而不是只靠 columns 一把梭。
columns 属性到底控制什么？
它只是把一个块容器按指定列数或列宽“切片”，浏览器自动重排流内内容（文本、inline 元素），但不改变文档流结构，也不影响块级元素的布局行为。
-
columns: 3表示尽可能分 3 列，实际列数可能因容器宽度不足而减少 -
columns: 150px表示每列理想宽度为 150px，列数由容器宽度动态计算 -
columns: 2 200px等价于column-count: 2; column-width: 200px，两者冲突时优先满足column-width - 所有子元素默认按文本流方式折行分列，
display: block的 div 会完整落入某列，不会跨列
如何让标题跨列显示？
纯 columns 下标题默认被切开。必须用 column-span: all，且该元素需是多列容器的直系子元素，且自身 display 必须是 block（不能是 inline 或 flex）。
- 正确写法：
<article style="columns: 3"> <h2 style="column-span: all; display: block">头条新闻</h2> <p>正文段落…</p> </article>
- 常见错误：给
<h2>加了float或position: absolute→column-span失效 -
column-span在 Firefox 中支持良好，但 Safari 旧版本（≤15.4）对column-span: all渲染不稳定，建议加-webkit-column-span: all
怎么防止段落或图片被奇怪地切断？
浏览器默认会在列边界处任意断行，导致图/段首尾分离。需主动声明“不要在这儿断”：
立即学习“前端免费学习笔记（深入）”；
- 防段落断开：
p { break-inside: avoid; }（注意是break-inside，不是page-break-inside） - 防图片断开：
img { break-inside: avoid; }，但部分浏览器对 inline 图支持弱，建议套一层div并设display: block - 若某段必须保持完整且内容较长，可加
column-break-inside: avoid（更语义化的别名，等价于break-inside: avoid） - 注意：
break-inside: avoid不是强制保证，而是“尽力而为”，极端窄列下仍可能失效
为什么文字看起来挤或松？行高和字体怎么调？
多列布局放大了行高（line-height）与字体大小（font-size）的协同问题。列越窄，换行越频繁，过大的行高会让段落显得稀疏断裂。
- 推荐组合：
font-size: 16px; line-height: 1.5（即 24px 行高），比默认line-height: normal更可控 - 避免用
line-height: 2这类无单位值在窄列中——它会随字号放大，列宽缩小时行距膨胀更明显 - 中文排版建议开启
text-align: justify，但需搭配hyphens: auto（并加lang="zh"）缓解单词撑开问题；不过中文连字符支持有限，Safari 对hyphens几乎不生效 - 真正影响“报纸感”的其实是字间距（
letter-spacing）：微调letter-spacing: 0.01em比调行高更有效
多列布局的脆弱点不在语法，而在浏览器对 break-inside 和 column-span 的实现差异——尤其当内容含浮动、绝对定位或 flex 子项时，列算法常直接放弃处理。真要稳定输出，得先确保内容结构足够“朴素”。
