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><div class="aritcle_card flexRow artxards">
  											<div class="artcardd flexRow">
  												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
  														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
  												<div class="aritcle_card_info flexColumn">
  													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
  													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
  												</div>
  												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
  												</a>
  											</div>
  										</div>
  </article>

• 常见错误：给 <h2></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 子项时，列算法常直接放弃处理。真要稳定输出，得先确保内容结构足够“朴素”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！