你有没有遇到过这种尴尬：一个标题在手机上排成两行，第二行却只有孤零零两三个字，像"尾巴"一样吊着，怎么看怎么别扭。text-wrap: balance 就是专门治这个的——浏览器自动把每行排得差不多长，标题瞬间"高级"起来。
一行代码的效果
css
balance.css
h1 {
text-wrap: balance;
}对比一下效果（假设标题是"2026 年前端开发趋势深度解析与实战指南"）：
| 写法 | 换行结果 |
|---|---|
| 默认 | 第一行：2026 年前端开发趋势深度解析与实 第二行：战指南（吊尾巴） |
| balance | 第一行：2026 年前端开发趋势 第二行：深度解析与实战指南（两行均衡） |
原理：浏览器会尝试所有可能的断行组合，选最后一行最短的那组，让各行长度尽量接近。
适用场景
- 标题（h1~h3）——最主要的用途，海报式排版必备
- 副标题 / 引导语——首屏 hero 文案
- 卡片标题——列表项里短文本的对齐
不要用在正文
balance 需要计算所有断行组合，是有性能成本的。规范也明确建议只用于短文本（标题类）。大段落正文请保持默认换行。
兄弟属性：pretty 和 nowrap
text-wrap 其实有四个值，顺手一起记：
| 值 | 作用 |
|---|---|
wrap | 默认值，正常换行 |
nowrap | 不换行（相当于 white-space: nowrap） |
balance | 各行长度均衡，适合标题 |
pretty | 减少"孤行"（最后一行只剩一两个词），适合正文 |
pretty 是专为正文优化的版本——它不追求行间均衡，只避免最后一行太短，性能开销比 balance 小得多。
css
full-set.css
h1, h2, h3 {
text-wrap: balance; /* 标题行间均衡 */
}
p {
text-wrap: pretty; /* 正文避免孤行 */
}浏览器支持情况
- balance：Chrome 114+、Edge 114+、Safari 17.5+、Firefox 121+，覆盖主流现代浏览器
- pretty：Chrome 117+、Safari 17.5+、Firefox 124+，稍晚一些
不支持的浏览器会直接忽略这一行，回退到默认换行——这正是渐进增强的理想样板：不需要任何检测、不需要 polyfill，放心大胆写。
💡 小技巧：用
@supports (text-wrap: balance) { ... } 可以针对支持的浏览器追加样式（比如去掉手动的 <br>），但多数场景直接写即可。总结
排版质量往往就差这么一行：标题用 balance，正文用 pretty。浏览器支持逐年铺开，忽略成本为零——这是 2026 年最值得立刻用上的 CSS 属性之一。
好的排版是"看不见"的排版：读者说不出哪里好，只觉得读起来舒服。