配了十年排版，今天才发现根子不在代码里——是 text-wrap 这两个值把孤儿彻底收了

配了十年排版，今天才发现根子不在代码里——是 text-wrap 这两个值把孤儿彻底收了

标题孤零零挂一个词，正文最后一行只有一个字——这种「孤儿」问题，排版设计师盯了十几年。以前的解法是写 <br>、塞 &nbsp;、或者用 JS 插件动态算。今天两行 CSS，把这件事彻底原生化了。

它不是一段代码，是一个排版指令

text-wrap 是 CSS 控制换行行为的属性，2024 年之后多了两个新值：balance 和 pretty。

text-wrap: balance 把每行的字符数均分，让标题的每一行长度差不多，不会有「最后一行只有两个字」这种孤儿行。适合 4 行以内的标题、引文、卡片副标题。

text-wrap: pretty 用更慢但更精准的算法安排段落的断行位置，保证最后一行不会是孤零零一个词。适合文章正文、长段落。

两个都是渐进增强——不支持的浏览器默默回退到普通换行，不坏事儿。

/* 标题：各行等长，没有孤儿 */
h1, h2, h3, blockquote {
  text-wrap: balance;
}

/* 正文：段落末尾不跑孤儿 */
article p {
  text-wrap: pretty;
  max-inline-size: 65ch; /* 配合行宽控制效果更好 */
}

balance vs pretty：谁适合什么场景

balance 有行数限制，Chromium 最多 6 行，Firefox 最多 10 行。超长文本直接退化成普通换行。所以它只适合标题级文本，不适合正文段落——这对实际使用刚好合适，标题才需要各行均匀，正文只怕末尾孤儿。

pretty 没有行数限制，适合任意长度段落。但 Firefox 截至 2026 年 8 月还不支持，所以正文用 pretty 时记得先检查降级效果：不支持的时候浏览器自动用普通换行，只是末尾可能有孤儿，不影响可读性。

两者可以同时存在：

/* 设计系统标配组合 */
.headline {
  text-wrap: balance;
}

.article-body p {
  text-wrap: pretty;
}

/* 备用：再配个连字符+行高，Firefox 用户体验也不差 */
@supports not (text-wrap: pretty) {
  .article-body p {
    hyphens: auto;
    line-height: 1.7;
  }
}

三条旧路 vs 两行新路

旧路一：写死 u00a0
「视觉上凑合」但换屏就废，响应式场景全部失效，维护成本高。

旧路二：JS 插件（jQuery widowfixer / orphanText）
需要等 DOM Ready、依赖 JS、增大 bundle，且插件逻辑是数字符估算，不如浏览器原生算法精准。

旧路三：设计时手动断行
设计师出图时把标题拆好，开发照着写死 <br>——改一个字要设计师重新出图，协作成本极高。

新路：两行 CSS
浏览器直接内联了排版引擎级别的算法，比任何 JS 插件都准，且不需要任何运行时开销。

下一步：从标题开始加

不要一上来就给整站全量加，先从 H1/H2 加起：

h1, h2 {
  text-wrap: balance;
  max-inline-size: 20ch; /* 配合 max 控制宽度，效果更明显 */
}

跑一遍看效果，满意了再扩展到 blockquote、card-title、hero-text。正文段落可以等 UX 评审通过再加 pretty，Firefox 用户看到的就是降级的普通换行——不疼不痒。