CSS多列布局（columns）专为长文本流设计，无法对单行短文本按字符数分列；需确保内容足够、允许换行且容器有明确高度，否则分列无效。
用 column-count 控制列数，但别指望它像 Flex 那样“自动换行”
CSS 的多列布局（columns）本质是为长文本流服务的，比如报纸排版。它会把一整段文字按高度切片，再横向铺开成多列——不是按单词/字符数分，也不是按容器宽度折行后重新分配列。所以如果你只有一行短文本（比如 "Hello World"），加 column-count: 3 不会产生三列，大概率还是显示为一行，因为没足够内容触发分列。
常见错误现象：column-count 设了但页面毫无变化；或者列宽忽大忽小、最后一列空着；甚至文字被截断在列边界。
- 确保父容器有明确高度或足够内容长度，否则分列引擎没“切”的依据
- 给容器加
column-fill: auto（默认值），避免浏览器强行均衡列高导致空白列 - 慎用
column-width单独设置——它只是“建议宽度”，浏览器会根据容器宽度和内容动态调整实际列数，可能和你预期不符
white-space: normal 是前提，nowrap 会让多列失效
如果文本容器设置了 white-space: nowrap 或 display: inline-block 且宽度不足，整个文本会被当成一个不可折断的块，columns 就完全不生效——它需要文本能自然换行，才有“流”可分。
使用场景：你有一段标题或标签文案，想视觉上“打散”成多列展示（比如响应式导航栏中把长菜单名拆成两列），但又不想改 HTML 结构。
立即学习“前端免费学习笔记（深入）”；
- 必须移除所有阻止换行的样式，包括
white-space: nowrap、overflow: hidden（可能隐藏溢出列）、display: inline - 若需保持单行语义但视觉分列，得换思路：用
display: flex+flex-wrap: wrap拆词，而不是依赖 CSS 多列 -
word-break: break-all或hyphens: auto可辅助控制断点，但对英文短词效果有限
真正想“按字符/字数切分”，得用 JavaScript 配合 textContent 和 split()
CSS 多列不提供按固定字符数切分的能力。比如要把 "ABCDEFGHI" 强制切成 "ABC"、"DEF"、"GHI" 三列并排，纯 CSS 做不到——它没有“按索引切字符串”的逻辑。
实操建议：用 JS 把字符串按长度切片，生成 <span> 节点插入容器，再用 Flex 或 Grid 排列。
const text = "ABCDEFGHI";
const chunkSize = 3;
const chunks = [];
for (let i = 0; i < text.length; i += chunkSize) {
chunks.push(text.slice(i, i + chunkSize));
}
container.innerHTML = chunks.map(s => `<span>${s}</span>`).join("");
- 注意中文、Emoji 等 Unicode 字符长度：用
[...str]替代str.split("")避免代理对断裂 - 切完后用
display: flex; flex-wrap: wrap控制换行，比 CSS columns 更可控 - 服务端渲染或静态页慎用此法——JS 执行前 DOM 是原始单行，可能闪动
移动端要注意 column-gap 和缩放导致的列宽塌陷
在 iOS Safari 或某些安卓 WebView 中，column-gap 值过小（如 0.5em）或容器宽度接近临界值时，浏览器可能合并列或忽略 gap，尤其开启双击缩放后更明显。
性能影响不大，但兼容性坑多：旧版 Safari 对 columns 的支持从 9.0 开始，且不支持 column-span（除了 all）。
- 统一用
rem或px设column-gap，避免em在嵌套字体大小下失控 - 加
-webkit-column-count和-webkit-column-gap前缀保底，iOS 12+ 基本可不加，但微信内置浏览器仍建议加上 - 测试真机缩放：双击放大后检查列是否错位或文字重叠——这是最容易被忽略的点
columns，后者绕不开 JS。别在 column-count 上死磕单行文本，那不是它的设计场景。 
