配了五年排版，每次标题断行都像在撞运气——今天两行 CSS 把这件事彻底修了

你有没有被标题里的「孤儿字」折磨过？好不容易写了一行漂亮的标题，结果第二行只剩下一个字，看起来像印厂的废稿。过去十年，前端工程师对付这个问题的方式大概分三派：一派在 HTML 里手动塞  ，一派用 JS 库动态计算断行位置，还有一派干脆假装看不见。

CSS 在 2024 年悄悄埋了两颗地雷，今年终于炸开了。

text-wrap: balance — 标题的等宽切刀

balance 的逻辑很简单：把多行文字切成长度尽量接近的几段。它不需要任何 JavaScript，不需要任何 HTML 标注，只需要一行：

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

Chrome 114、 Safari 17.5、 Firefox 121 全部支持。2026 年初基本已经是全票通过。

它是怎么做到的？浏览器在渲染阶段会尝试多个断点，算出每种切法各行的长度方差，选那个最「均匀」的。代价是它比普通断行贵的多，所以规范把它限制在 ≤6 行的元素里——超过 6 行它会静默关闭，不影响性能。

实际效果什么样？

默认断行：

配了五年排版，每次标题断行
都像在撞运气

balance 之后：

配了五年排版，
每次标题断行都像在撞运气

两行长度基本相等，阅读节奏完全不一样。

text-wrap: pretty — 正文的护栏

pretty 是给段落用的。它不管整篇的均匀性，只盯着最后几行干一件事：别让最后一个字落单了。

p, li { text-wrap: pretty; }

Chrome 117+、 Safari 17.5+ 支持，Firefox 还在路上（预计 134），但它会静默降级，不影响阅读。

它还会顺带优化连字符位置和右边缘的 ragged 效果——以前排版书里教的那些「不要在行尾留下太少字」「不要在段尾用连字符」，浏览器现在自己会算了。

两者一起用：整个页面的排版升一级

:root { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

两行声明，覆盖全站。正文没有孤儿字，标题均匀断行。以前那些 Widowtamer 和 jQuery-widow-fix 插件可以删了。

这些场景特别适合用

标题类： 页面大标题、产品卡片标题、博客列表标题。只要不超过 6 行，闭着眼睛加 balance。

正文类： 文章正文、列表描述、弹窗文案。pretty 对性能影响极小（只优化最后 4 行），可以大胆铺开。

组合场景： 标题加了 line-clamp 限制行数，balance 仍然有效，它在截断前就会把最优断点算好。

需要注意的坑

flex / grid 容器里的标题，balance 可能和容器的 intrinsic sizing 打架——设个 flex: 1 1 auto 或套一层 wrapper 就解决了。

tabular numbers（等宽数字）不适合 balance，会破坏数字对齐，用 :has(> .tabular) 单独关掉。

中日文内容 balance 行为有差异，Chrome 119+ 建议加 word-break: auto-phrase 改善。

下一步

1. 打开 Chrome DevTools，随便找个有多行标题的页面，在 Elements 里给 h1 加一行 text-wrap: balance，看效果
2. 给全站正文的 p 加 text-wrap: pretty，刷新，看段落收尾
3. 把以前为了防孤儿字写的媒体查询删掉——那些 hack 现在可以退役了

这两行 CSS 干掉的，是前端排版里一个存在了快二十年的手工活。