column-width 是建议值，列宽可能略大但不小于设定值；需容器有明确宽度（如 width: 100vw），避免 flex 直接套用，慎用 column-rule，中文需 lang="zh" + hyphens: auto。
column-width 设置后列数不固定，怎么让内容均匀分列
移动端用 column-width 做多列文字布局，浏览器会按最小宽度切分，但列数由容器宽度和内容长度动态决定——这不是 bug，是规范行为。想“看起来均匀”，关键不是强行固定列数，而是控制列宽下限 + 容器可伸缩性。
-
column-width是“建议值”，实际列宽可能略大（比如设120px，最终可能是128px），但不会小于它 - 容器必须有明确宽度（不能是
width: auto或未设父容器限制），否则列宽计算失效 - 移动端常见陷阱：给容器设了
max-width: 100%却忘了父元素没设width，导致列宽退化为单列 - 示例：容器加
width: 100vw或用flex/grid父容器约束，再配column-width: 140px，比单纯设column-count: 3更适应不同屏幕
Android WebView 和 iOS Safari 对 column-rule 渲染不一致
column-rule 在部分 Android WebView（尤其旧版 Chrome 内核）里会消失或错位，iOS Safari 则基本稳定。这不是样式写错，是渲染管线对多列边框的处理差异。
- 避免用
column-rule: 2px dashed #999这类复杂样式，优先用solid+ 单色 - 不要依赖
column-rule-offset，它在 Android 上支持率极低 - 更稳妥的做法：用
column-gap配合伪元素模拟分隔线，例如在每列左侧加::before绝对定位细竖线 - 检查是否启用了
-webkit-column-break-inside: avoid，某些 Android 版本开启后会连带影响column-rule绘制
文字跨列断行异常，出现孤字或标点悬挂
中文排版下，column-break-inside: avoid 只能防止块级元素断开，对段内换行无约束。孤字、标点出现在行首/行尾，本质是浏览器默认的断行策略没适配中文语义。
- 必须加
hyphens: auto并配合lang="zh"属性，否则 Safari 不触发中文断行逻辑 - 禁用
word-break: break-all—— 它会让词语中间硬断，破坏阅读节奏 - 对标题或强调文本，用
white-space: nowrap防止被拆到不同列，但仅限短文本，长文本会溢出 - 测试时重点看小屏（如 iPhone SE），列宽窄时断行问题最明显
flex 容器里套 column 布局，子元素高度塌陷
把 display: flex 的父容器和 column-width 同时用，子元素（如 p 或 div）常表现为高度为 0 或内容重叠。这是因为 flex 主轴方向与 column 流向冲突，浏览器无法同时满足两者布局约束。
- 绝对不要在 flex 项目上直接设
column-width，应把多列逻辑下沉一层：flex 项内再包一个div，该div设column-width - 若需等高列，用
column-fill: balance（默认值），但注意它只在内容足够多时生效；内容少时各列高度仍由内容撑开 - 避免在 column 容器上同时设
align-items或justify-content，这些 flex 属性对 column 布局无效，还可能干扰渲染
事情说清了就结束。真正难的不是写对那几行 CSS，而是每次改完要真机测三端：iOS Safari、Android Chrome、微信内置 WebView——它们对 column 的实现细节差得远比文档写的多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
