报纸排版搬进网页只做了一半：Chrome 145 的两个新属性，让多列容器不再横向溢出

报纸排版搬进网页这件事，CSS 其实只做了一半——内容一多，多列容器默认会往右无限溢出，给你甩出一根横向滚动条。Chrome 145 开始，多列布局二级规范里的 column-wrap 和 column-height 把另一半补齐了：列可以往下一行换行，终于不用在「纵向滚到吐」和「横向滚到烦」之间二选一。

先说清楚这个问题为什么难缠。

column-count / column-width 从 2017 年就是 Baseline，用起来很顺：给一个块容器两列三列，文字自动流过去，像报纸一样。但它有一条隐藏的规矩——多列布局只有「一行」。文字流完最后一列，如果还有内容，就在内联方向继续生成新的溢出列（overflow columns），而容器宽度不会变，于是这些列直接跑到容器外面。

在连续媒体（普通网页）里，只要你对多列容器设了高度，超出的列就会横向溢出——浏览器给你一根横向滚动条。你原本想让读者像看报纸一样一行行往下读，结果变成左右拖着看。这也是为什么很多团队干脆放弃多列布局：宁可让列变高、让用户上下滚动，也不敢碰那个横向滚动条。

在 Chrome 145 之前，你的选择就两个：要么不约束高度，让列一直变高、用户滚上滚下读完一列再滚回顶部读下一列；要么约束高度，然后收下一根横向滚动条。两条路体验都不好。

column-height + column-wrap 给的是第三条路：给每一行的列设一个固定高度，装满之后，溢出的列自动换到下一行，方向是块方向（block direction）。在横排书写模式下，这就变成了「一屏一屏往下翻的列行」，而不是「一行永远向右延伸的列」。

.article {
  column-count: 3;
  column-height: 95vh;   /* 每行列的高度 = 一屏 */
  column-gap: 2rem;
  gap: 2rem;             /* 行列间距 */
}

这里有个关键细节，很多人第一次写会多此一举：你不需要显式写 column-wrap: wrap。因为 column-wrap 的初始值是 auto，而当 column-height 被设成一个具体值时，auto 会自动解析为 wrap。反过来，column-height: auto 时，column-wrap: auto 解析为 nowrap——也就是传统那种横向溢出的老行为。所以默认行为的分界线，就看 column-height 有没有给值。

columns 简写也顺手支持了，column-count / column-width / column-height 三件套可以一次写完：

/* 三列、每列 5em 高、超出换行 */
.list {
  columns: 3 auto 5em;
}

注意 MDN 里点明的一条规则：在简写里设定一个 column-height 值，会把 column-wrap 重置回它的初始值 auto（再按上面规则解析）。别在简写后面又去猜它的实际行为。

这个能力真正的价值，不是让文字排得更好看，而是解锁了几种以前只能靠 JS 硬凑的布局：

• 方块方向轮播 / 翻页式阅读：把 column-height 设成 100dvh，一整行正好填满视口，再配 scroll-snap-type: y mandatory，往下滚就是干净的一屏一屏分页，不需要写任何分页 JS。
• 定高卡片墙：卡片高度可预测时，用列换行把内容流成多行多列的无缝网格，比 flex/grid 少一层包装。
• 报纸式长文：显式列高 + 换行，让读者顺着一列读到底、再换行的阅读顺序是明确的，而不是被横向滚动条打断。

但这里必须泼一盆冷水，也是官方博客特意强调的 UX 陷阱：一旦出现多行列，读者可能根本没意识到还有下一行，读到底部就直接往下滚，把中间的列整行跳过去了。多行结构本身会制造阅读歧义。官方给的缓解方向是等 CSS Gap Decorations 规范落地（目前 developer trial），在 row-gap 里加行分隔线来强化视觉区分——这条现在还没稳定，先记在心上。

还有几个必须知道的现实约束：

1. 浏览器支持：这两个属性来自 CSS Multi-column Layout Level 2，Chrome 145 起支持（2026 年）。Firefox 在规范信号上是 Positive 但还没实现，Safari 暂无信号。也就是说，目前基本只有 Chrome/Edge 能用，上生产必须做特性检测或回退。
2. 多列布局的不可替代性：Grid 和 Flexbox 都是「按项目（item）」排布的，它们无法把一条连续的内容流切分到多个容器里。多列布局仍然是唯一能对连续文本流做分片的机制。这就是为什么这个「换行」补丁值得关心——它补的是多列布局唯一的短板。
3. 列高估错的代价：column-height 给太小，列会不平衡、出现难看的大块空档；给太大，又退回上下滚动的老问题。它适合内容量相对可预测的场景，不适合高度完全随机的流。

落地建议就一句：如果你的项目里有「长文本 + 需要控制阅读高度」的场景，先在 Chrome 145+ 里加一层特性检测试用：

@supports (column-height: 20em) {
  .article {
    column-count: 3;
    column-height: 80vh;
  }
}

不支持的浏览器保持原来的单行多列 + 自然溢出，用户照样能读，只是少了那层「翻行」的体验。先用 @supports 把它当成增强，别当成基础。