平衡折行

什么时候用

• 一两个短语的标题在窄容器里折行，最后一行只掉下一个字，很难看
• 卡片标题、引言、按钮文案这类短文本，想让每行长短匀称
• 同一块文字要在不同宽度下都保持平衡，又不想手写 br 把位置写死

适用场景：文字 / 卡片 / 页面

推荐取值

属性

text-wrap: balance

适用行数

≤ 6 行（Chromium 上限）

容器宽度

20–40ch

降级

text-wrap: pretty，或者不写

别搞混

• 和「text-wrap: pretty」的区别

  pretty 主要盯正文最后一行，避免段落末尾只留一个孤字，代价是排版时间略微增加；balance 是把所有行拉成一样长，只适合短文本，Chromium 超过六行就不再做平衡。

• 和「word-break / overflow-wrap」的区别

  那两个解决的是「一个长单词放不下时从哪里断」，管的是溢出；text-wrap: balance 不改变断词规则，只是重新分配每行放几个词。

• 和「手写 br」的区别

  br 把换行位置写死，换个容器宽度就错位；balance 由浏览器按当前宽度重新计算，宽度变了它会重排。

容易踩的坑

• 只对短文本有意义：Chromium 最多平衡 6 行，超了就静默退回普通折行，正文段落加它没有效果还多花排版时间。
• 中英文表现不同：中文逐字换行，balance 只能微调每行字数，效果远不如英文标题明显，别指望它把中文排成对称。
• 容器得有确定的宽度上限，文字根本不折行，就没有可平衡的东西。
• Safari 17.5 之前的版本会直接忽略这条声明，所以基础样式必须是可读的普通折行，不能只靠 balance。

无障碍降级

纯排版属性，和动态效果无关，不需要降级。

关键词

• text-wrap: balance
• text-wrap: pretty
• orphan
• widow
• ch
• max-width
• line breaking

参考

• MDN · text-wrap
• MDN · CSS 文本模块

相关展品

• T-01流体排版Fluid Type
• T-04逐字显现Character Reveal
• T-05可变字体Variable Font