配了八年排版，每次孤行孤字都让我想重写——今天两行 CSS 把这件事彻底修了

每次写文章发出去，总有几行排版看着别扭——最后一行只剩一个字，或者标题断到了奇怪的位置。以前只能靠手动调，或者干脆认命。

今天 Chrome 117 把这件事彻底原生化了，两行 CSS 搞定。

这个痛点是什么

排版里的「孤行孤字」，说的是段落最后一行只剩一两个字，或者标题被截成了不合理的两段。这个问题设计师在意、编辑在意、读者也下意识地在意，但它从来没被当回事——因为 CSS 一直没有原生能力解决它。

之前只能靠 orphans / widows 属性，效果有限还跟多列布局绑定。现在 text-wrap 有两个新值，专门治这个。

text-wrap: pretty ——治孤行

pretty 的逻辑很简单：尽量让段落最后一行不出现孤字独行，如果会出现，就提前调整整段换行逻辑。

p {
  text-wrap: pretty;
}

Chrome 117+、Safari 26+ 支持。Firefox 还没上，但不报错，直接回退到普通换行，破坏感为零，属于渐进增强。

实际效果：段落末尾那个孤零零的字，会被并进前一行。多行段落效果最明显。

text-wrap: balance ——治标题乱断

标题用 pretty 不够，标题需要的是「每行字数尽量均匀」，而不是「末尾不要孤字」。

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

Chrome 130+、Firefox 121+、Safari 17.5+ 支持。也是渐进增强，不支持就回退到普通换行。

实际效果：标题如果有两行，这两行字数会被算法调均匀，不会出现第一行 5 个字第二行 15 个字的尴尬。

两者配合用

/* 标题用 balance */
h1, h2, h3 { text-wrap: balance; }

/* 正文用 pretty */
article p { text-wrap: pretty; }

/* 再配个合理的行宽，效果更稳 */
article p {
  text-wrap: pretty;
  max-inline-size: 65ch;
}

配合 @property 可以做更多

如果你想让渐变背景上的文字颜色随亮度变化，可以用 @property 注册自定义属性，再结合 text-wrap 的逻辑做更精细的控制——但单说排版，这两行已经够用了。

实际案例

看这张对比：同样一段文字，关闭和开启 pretty 的效果差异。段落末尾那个孤立的「字」并进了前一行，整个段落看起来完整得多。

下一步

如果你的项目还在用 orphans 属性，考虑把它换成 text-wrap: pretty，效果更好，浏览器开销更小。

如果你是做设计系统或者内容站，给你的正文章节加上这两个属性，用户体验提升是即时的。

Chrome DevTools 现在可以直接查看 text-wrap 的换行决策，打开 Elements 面板，找到支持 text-wrap 的元素，可以看到浏览器实际采用的换行策略。

两行 CSS，换掉过去那些靠经验硬调的排版方案——这件事，早该这样了。