配了八年排版，每次标题换行都要靠手数和 nbsp——今天两行 CSS 把这件事彻底原生化了

写了八年排版，每次看到标题最后一行孤零零一个字，心里都发毛。「Build accessible interfaces」硬生生断成两行，第二行只剩一个词——设计师看了皱眉，自己看着也别扭。过去的解法是塞   硬卡断点，或者靠 JS 插件动态算，翻译一次改一次，治标不治本。

现在两行 CSS 彻底把这件事原生化了。

text-wrap: balance：让标题的每一行都差不多长

text-wrap: balance 让浏览器自动把多行文字的每一行长度分布得尽量均匀，不再是「先把每行塞满、再断到下一行」的贪婪逻辑。效果立竿见影：

h1, h2, h3, blockquote {
  text-wrap: balance;
}

断法从「Build accessible / interfaces」变成「Build / accessible interfaces」——两个词一行，读起来顺畅多了。Chrome 从 114 版本开始支持，Firefox 121+，Safari 17.5+。

原理是浏览器对元素内容做多次换点尝试，选出最均衡的分布。不过有个限制：Chromium 最多均衡 6 行，Firefox 最多 10 行。超了这个行数浏览器就静默忽略，所以用它处理标题永远没问题，但别指望它帮你均衡整页正文。

text-wrap: pretty：让段落结尾不再孤零零一个词

pretty 是 balance 的兄弟，但目标不同。它专门优化段落最后几行的断点：不让最后一行只孤零零站一个词（「的」「了」「在」这种），也不让连字符刚好落在段尾。算法跑在段落末尾 4 行上，不卡性能，也不影响前面几行的自然断法。

p, li {
  text-wrap: pretty;
}

效果：从「读者 flow through content without noticing where lines break or how words are distributed.」变成「读者 flow through content without noticing where lines break or how words are distributed and」——最后一行至少留两个词。Chrome 117+，Safari 26+，Firefox 134+。

pretty 跑的是全局优化算法（比 balance 更慢），但因为只算最后 4 行，对长段落也完全没问题。不像 balance 那样有行数上限，所以可以大胆用在 body 文本上。

两者一起用：全局两行，全站 typography 自动变好

实际项目里把两个值配合起来用，覆盖所有文本场景：

/* 全局段落：防孤行词 */
p, li {
  text-wrap: pretty;
}

/* 标题级：均衡每行长度 */
h1, h2, h3, blockquote, figcaption {
  text-wrap: balance;
}

配合 line-height 使用效果更好。标题配 1.1~1.25 的紧凑行高，balance 的视觉效果更明显——宽松行高下均衡和不均衡的视觉差异本来就不大。

三个坑

1. balance 在 bordered 容器里可能打架

容器有 border 或 box-shadow 时，balance 均衡出来的宽度可能和容器宽度产生视觉偏差。这时候要么把 balance 限制在标题上（h1~h6），要么给容器留足够的 horizontal padding。

2.   和 <br> 要删掉

上了 balance 之后，过去的硬断点变成了干扰源——浏览器要同时对抗你的手动断点和自己的均衡算法，结果就是在某些宽度下产生双倍断行。迁移方法是全文搜一遍   在文本节点里的用法，逐个检查是否需要保留。

3. Firefox 对 pretty 还在路上

截至 2026 年，Firefox 134+ 支持 balance，但 pretty 还不支持。两个都是渐进增强——不支持的浏览器照常贪婪断行，不会有 layout 问题。但如果你的用户里 Firefox 占比较高，段落结尾的孤行词问题仍然会存在，介意的话可以用一个极简的 JS fallback。

三步下一步

第一步：给标题加 balance

搜一下你的 CSS 里所有 h1, h2 的样式，加一行 text-wrap: balance;。效果立竿见影，改完刷新就看得到区别。

第二步：全局段落加 pretty

在根级别加 p, li { text-wrap: pretty; }。这一步改动最小但收益最高，特别适合博客、文章页、内容型产品。

第三步：清掉硬断点

全项目搜索   在文本内容里的用法，把纯粹为了控制断行而加的删掉。翻译项目里尤其值得做——翻译后的文本长度完全不同，硬断点往往变成错误断行。

两行 CSS，把排版从「靠缘分」变成「靠浏览器自己会」——这件事等了 CSS 二十年。