文字排版挤成一团我调了三年，今天发现 CSS 一行就搞定了——text-wrap: balance 让浏览器自己算均衡断行

你有没有被标题或段落的断行折磨过？

比如一个标题明明可以两行读完，结果浏览器自作主张在第三个字就换行了，读起来特别别扭。或者卡片里几段文字，右边缘对齐之后最后一行参差不齐，看起来像缺了一块。

这种问题以前只能靠手写 JavaScript 动态算，或者干脆放弃。2024 年开始，Chrome、Safari、Firefox 陆续支持了一个 CSS 新属性——text-wrap: balance，让浏览器自己来算最优断行位置。

它怎么用

h1 {
  text-wrap: balance;
}

就这一行。不需要任何 JavaScript，不需要外部库。

balance 的核心思路是：让每一行的字符数尽可能接近，这样多行文字看起来就均衡了。比如一个 30 字符的标题，浏览器会自动判断在哪个位置断行能让两行各约 15 字，而不是第一行 20 字、第二行 10 字。

和 pretty 的区别

text-wrap 还有一个值叫 pretty，这两个容易混淆。

balance 侧重的是「行长度均匀」，适合标题、卡片标题、诗歌这类需要视觉均衡的短文本。pretty 侧重的是「标点避头尾」，比如不让句号出现在行首，是更传统的排版规则。

简单说：标题用 balance，正文段落用 pretty，或者直接 text-wrap: auto 让浏览器自己决定。

真实效果对比

我拿一个实际卡片组件测了：

没加的时候，浏览器断行是「前端性能优化你//真的懂了吗」，视觉上第一行挤、第二行空。加了之后变成「前端性能优化//你真的懂了吗」，两行长度接近，阅读体验明显好很多。

性能要注意

text-wrap: balance 不是没有代价的。浏览器需要在渲染阶段做额外的计算来决定断行位置，对于长文本（比如整篇文章），这个计算量会导致首次渲染变慢。

所以官方建议：只用在短文本上，比如标题、卡片文字、标签。整段正文建议保持 text-wrap: auto。

Chrome 的实现还有一个细节：对于中文和日文这类不使用空格分词的文字，balance 的效果会打折扣，因为浏览器是按字符计数的，中文一个「前端」算两个字符但视觉宽度和英文差不多。这个限制目前没有完美解决方案，实用中影响不大但心里要有数。

兼容性

截至 2026 年中，Chrome 117+、Safari 18+、Firefox 121+ 都支持了。Baseline 2024 已收录，生产可用。

如果需要兼容更老的浏览器，可以用 PostCSS 插件 @csstools/postcss-logical 做降级处理，旧浏览器里 fallback 到普通断行。

下一步

如果你现在正在做设计系统或者维护一套组件库，把 text-wrap: balance 加到标题类的默认样式里，成本极低收益明显。尤其是卡片组件、列表标题、Modal 弹层标题这类场景，加上去用户立刻能感觉到「看起来舒服了」。

正文段落如果在意排版质量，可以同步加上 text-wrap: pretty，两个可以同时存在：

.card-title {
  text-wrap: balance;
}
.article-body {
  text-wrap: pretty;
}

这个改动不用任何 JavaScript，一行 CSS 就够了。