应使用 column-count 或 column-width 实现多列文字排版，二者不可强设冲突；column-width 优先级更高，column-count 是目标值而非强制值；需配合 column-gap、媒体查询及 column-span: all 等确保可读性与兼容性。
直接说结论：用 column-count 或 column-width，别写 HTML 标签切列，也别硬套 display: grid 或 float——那不是多栏文字排版，那是手动分块。
为什么 column-count 设了没反应
它不是失效，是容器没“达标”：
- 容器必须是块级元素（
display: block或inline-block），不能是flex、grid、float或inline - 内容太少或容器高度太小（比如只有两行文字），浏览器认为“一列就够了”
- 父容器设了
overflow: hidden，会把第二列之后的内容直接裁掉 - 你同时写了
display: flex和column-count: 3——两者互斥，flex会完全接管流式行为，column-count被忽略
column-count 和 column-width 到底该选哪个
这不是偏好问题，是语义和响应逻辑的根本差异：
-
column-count: 3是“硬分三列”，窄屏下文字会被压缩，行宽跌破 120px 就难读；适合打印样式或后台报表等固定输出场景 -
column-width: 16rem是“每列至少这么宽”，浏览器自动算列数，小屏自然退化为单列，阅读体验更稳 - 两者同时存在时，
column-width是底线，column-count是上限；比如容器只有 30rem 宽，column-width: 16rem就只出 1 列，column-count: 3被无视 - 日常推荐组合：
column-width: 16rem+column-gap: 1.5rem+column-rule: 1px solid #eee
标题横跨所有列却没效果，卡在哪了
column-span: all 看似简单，但有三个硬门槛：
立即学习“前端免费学习笔记（深入）”；
- 必须作用于多栏容器的**直接子元素**——如果
h2套在<div class="wrapper">里，它就不是直系子元素，声明无效 - 目标元素必须是块级（
display: block），inline元素要先加display: block - 旧版 Safari（17 之前）不支持，iOS 14 以下基本忽略；Chrome/Edge/Firefox 100% 支持
- 它不会触发新 BFC，也不影响后续内容分栏逻辑，放心用
图片被劈成两半、段落首行缩进错乱，怎么修
这是多栏布局最常被忽视的副作用：
- 给可能被截断的元素显式加
break-inside: avoid：h2、h3、p、img、blockquote、figure - 旧 Safari 需补前缀：
-webkit-column-break-inside: avoid -
::first-line和::first-letter只对第一列生效——这是规范行为，不是 bug；别试图 hack 每列首字下沉，统一用text-indent更可靠 - 避免嵌套多层
div包裹段落，每层都可能成为断点；直接给p加样式更干净
真正难的不是写几行 CSS，而是判断「这里是否适合用多栏」：新闻正文、长篇说明文档可以；表单、导航菜单、卡片列表不行。一旦用了，就要接受 ::first-line 只在第一列、链接焦点滚动时可能丢失、打印预览列宽重排这些隐性代价——它们不报错，但用户能感觉到。
