CSS排版中的孤儿词与widow：text-wrap平衡体验

排版圈有个流传很久的细节洁癖：一行的结尾掉下来一个孤零零的词，或者段落最后只剩两三个字，读起来总觉得别扭。英文排版里这类问题有两个经典名字——orphan（孤词）和 widow（寡行），指的是段落的首行或末行被拆散、留下形单影只的一小截。中文排版的说法更直白：孤字、寡行、掉字。

以前我们只能靠手动断行、插 `<br>`、反复调 `max-width` 硬凑。现在 CSS 给出了更体面的工具：`text-wrap: balance` 与 `text-wrap: pretty`。

先别搞混：orphans 与 widows 是另一个属性

CSS 里确实存在 `orphans` 和 `widows` 这两个属性，但它们管的是分页、分栏场景下的最少行数控制，属于打印与多列排版的范畴，和「标题最后一行只剩一个词」这种行内断行问题不是一回事。真正解决断行美观问题的，是 `text-wrap`。

text-wrap: balance 做了什么

`text-wrap: balance` 让浏览器在渲染前重新分配每一行的长度，目标是让各行宽度尽量接近，从而消化掉那个突兀的短尾行。原理不复杂：浏览器会尝试多个候选宽度，挑出视觉上最均衡的断法，因此它是有代价的——Chromium 里平衡计算最多只处理 6 行左右，超出就退化成普通换行，这纯粹是出于性能考虑。

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

这段代码是它最典型的用法：短文本、标题、图注、引用块。

pretty 与 balance 的分工

`text-wrap: pretty` 更克制。它不追求每行等长，主要目标是避免最后一行出现孤字，代价更低，因此适合长段落正文。

article p {
  text-wrap: pretty;
}

一句话总结分工：balance 负责「断得好看」，pretty 负责「断得合理」。给长段落用 balance 既可能不生效，也白白浪费性能；给标题用 pretty，则享受不到逐行均衡的好处。

中文场景的额外考量

中文没有空格分词，浏览器按字断行，于是英文的「孤词」变成了中文的「孤字」。`text-wrap: balance` 对中文同样生效，效果是把每行字数尽量均分，末行不再只剩一两个字。而中文一行的容量本来就不小，末行只挂一个字的概率反而比英文更高，所以收益更明显。

不过中文排版还有避头尾的规矩，标点不能出现在行首、括号不能劈成两半。这部分仍然要靠 `line-break: strict`、`word-break`、`hanging-punctuation` 之类配合，`text-wrap` 管不了。

几条实践建议

- 不要写 `* { text-wrap: balance; }`。行数限制加上计算成本，等于形同虚设。
- balance 会改变文本的整体高度，标题放在 flex/grid 容器里时留意布局高度变化。
- 配合 `max-inline-size: 30ch` 一类的行宽约束，效果更稳定。
- 文本内容频繁变化的场景（实时输入、动画文字）慎用。
- 渐进增强可以用 `@supports`：

@supports (text-wrap: balance) {
  h2 { text-wrap: balance; }
}

目前主流浏览器已陆续支持这两个值，老版本降级为普通换行，不会出错。

小结

`orphans` / `widows` 是分页时代留下的老规矩，`text-wrap: balance` 与 `pretty` 则是现代排版的顺手工具。把 balance 留给标题和短文本，pretty 交给正文段落，中文场景里再叠上避头尾规则，几行 CSS 就能让页面干净不少——这种「不显眼但舒服」的改动，恰恰是排版功力的体现。