加 columns: 3 不会自动实现报纸效果，需配合 break-inside、column-span 和合理行高；常见单栏原因是容器或子元素破坏块级流，如 flex、grid、float、绝对定位、固定高度或 transform；column-width 更适合响应式，column-count 适合固定版式；防标题劈开用 column-span: all，防段落断裂用 break-inside: avoid，中文断字用 word-break: keep-all；line-height 宜设 1.35–1.45，需显式声明 column-fill: balance，并注意 safari/firefox 兼容性问题。
直接加 columns: 3 不会自动变成报纸效果——它只是切分容器，真正要像报纸，得靠 break-inside、column-span 和字体行高协同控制，否则标题劈开、图片错位、文字挤成细条全是常态。
为什么加了 columns 却只显示一栏？
最常见原因不是写错了属性，而是容器或子元素破坏了「块级流」前提：
- 容器用了
display: flex或display: grid→ 多列布局被完全禁用 - 子元素有
float、position: absolute或overflow: hidden→ 内容脱离流，不参与分栏 - 容器设了固定
height（比如height: 400px）→ 后续内容被截断，看起来像没分栏 - 父级或自身带
transform、will-change→ 部分浏览器降级为单列渲染
调试时先临时加 border: 1px solid red 看容器真实高度，常会发现它压根没撑开。
column-count 和 column-width 到底该用哪个？
二者语义不同，混用易冲突：
-
column-count: 3→ 强制分 3 栏，宽度由容器均分（适合桌面端固定版式） -
column-width: 16rem→ 告诉浏览器“每栏至少 16rem”，列数由容器宽度动态决定（更适合响应式） -
columns: 3 180px→ 浏览器优先满足column-width；若容器太窄装不下 3 栏，会自动减为 2 或 1 栏
小屏强行三栏会导致行宽过窄、阅读吃力，推荐以 column-width 为主，再配合媒体查询在宽屏覆盖 column-count，而不是同一规则里共存。
标题跨栏、段落被劈开、图片卡在栏尾怎么防？
浏览器默认机械切分，必须显式干预：
- 标题跨栏：用
column-span: all，但仅对块级直系子元素有效（如<h2></h2>），且需配display: block；Safari ≤15.4 不稳定，加-webkit-column-span: all - 防段落/图片断裂：统一加
break-inside: avoid（IE11 降级为page-break-inside: avoid） - 防孤行：设
orphans: 3和widows: 3 - 中文不断字：加
word-break: keep-all；英文连字符需hyphens: auto+lang="en"
break-inside: avoid 是尽力而为，不是强制保证——极端窄列下仍可能失效，别指望它 100% 守住。
字体、行高和兼容性最容易被忽略的点
多列放大了行高与字体大小的协同问题：
- 列越窄，换行越频繁，
line-height过大会让段落稀疏断裂；建议用1.35–1.45区间，搭配 Charter 或类似铅字感字体 -
column-fill: balance必须显式声明，否则默认按顺序填满，末栏可能空一大截 -
column-rule和column-gap的宽度会从容器总宽里扣除，响应式下需同步调整，否则窄屏时间隙占比过大 -
column-span: all在 Safari 旧版本中支持弱，Firefox 对display: table类元素支持不稳定，别把它当关键布局依赖
真正难的从来不是写上 columns: 3，而是处理用户选中文字时跨栏复制乱序、小屏回退后 column-gap 消失、以及屏幕阅读器对多列语义的实际解析方式——这些没法靠一行 CSS 解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
