中文标题总是断得难看？CSS text-wrap balance 的宽度约束与降级验收

做新闻卡片的时候，标题明明只打算留两行位置，中文排版却经常出现“第一行塞得满满当当，第二行孤零零只剩两三个字”的情况。手动插入
能修好单张设计稿的效果，可一旦切换手机宽度、调整字号，马上又会冒出新的不合理断行。现在更稳妥的方案是让浏览器直接参与短文本排版：给标题启用 text-wrap: balance，搭配合理的宽度约束，再做好普通换行的降级兼容就好。

先把标题的活动范围收窄

balance 不是强行把每一行文本都切成等长，而是让浏览器专门针对短文本场景，计算出视觉上更均衡的软换行位置。这个特性对标题的提升最明显，毕竟标题通常只有两三行，一两行长一两行短的问题一眼就能看出来。

先给标题设置符合场景的真实宽度边界，不用一上来就堆各种断行技巧：

.news-card__title {
  max-width: 22ch;
  text-wrap: balance;
  line-height: 1.45;
}

.news-card__summary {
  max-width: 48ch;
  text-wrap: pretty;
  line-height: 1.75;
}

标题场景用 balance，摘要段落如果有需求可以考虑 pretty，两者的优化目标完全不同。标题优先追求断行观感均衡，长段落还是要优先兼顾布局性能和阅读舒适度。MDN 对 balance 的说明也明确提到这个特性仅适用于短文本场景，不同浏览器对参与自动平衡的最大行数都有内置上限。

为什么只写 balance 仍然会断得不好

我排查过很多同类的误用案例：开发者直接把 balance 加到没有宽度约束的标题元素上，结果桌面端看着效果很好，到手机端直接挤成三四行完全没法看。最终影响断行结果的通常是三个变量：

中文标题里混有版本号、英文产品名或者连续长数字的时候，浏览器会按照对应的语言和字符规则寻找断点。别直接用固定 height 把溢出的文本藏起来，标题就算视觉上截断了，屏幕阅读器、选中文本复制的时候也要能拿到完整内容。

给旧浏览器准备自然降级

text-wrap 仅在较新的浏览器版本中支持，但前端组件往往还要兼容旧设备、内嵌 WebView 或者特殊企业定制浏览器。降级的核心思路不是硬要复刻完全一致的视觉效果，而是保证标题内容完整、排版顺序稳定、不会遮挡旁边的交互按钮。

.news-card__title {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

@supports (text-wrap: balance) {
  .news-card__title {
    text-wrap: balance;
  }
}

如果业务有要求标题最多显示两行，可以用成熟的多行截断方案，同时一定要保留可访问的完整文本，比如把原始完整标题保留在 DOM 结构里，只用视觉样式做截断省略，别直接把内容替换成带省略号的短字符串。如果标题本身是链接元素，焦点环、悬停提示和键盘操作路径也不能被固定高度裁切失效。

把验证放进组件回归，而不是只看截图

组件测试至少要覆盖四组输入场景：纯中文短标题、中文夹杂英文版本号、长连续数字，还有用户自定义输入的长标题。每组都要在窄屏、桌面端、系统默认字体和 WebFont 加载完成后分别检查效果。

• 标题没有出现仅一两个字的孤行，卡片高度也没有在字体加载完成后突然跳动偏移。
• 浏览器不支持 text-wrap 的时候，文本依然可以正常换行，链接元素也能正常获得焦点。
• 浏览器页面缩放到 200% 之后，标题不会盖住操作按钮，也不会被父容器裁切掉内容。
• 使用读屏软件、选中文本复制的时候，得到的是完整标题内容，完全不依赖视觉上的人工断行效果。

常见问题

text-wrap: balance 能用于整段正文吗？

不建议把它设为长正文的默认属性。它更适合标题、补充说明文字和短引文这类场景，长文本先用普通自然换行就好，确实有特殊排版需求再评估 pretty 带来的布局成本。

为什么设置了 balance，标题还是会分成三行？

它不会突破容器的最大宽度，也不会自动删除文字内容。先检查 max-width、字体加载状态、字号设置，以及标题里有没有无法断开的长英文、长数字序列。

要不要用 br 固定中文标题的换行？

只有内容本身就需要固定朗读节奏、固定断句的场景才考虑使用。可复用卡片、响应式页面、多语言页面优先交给自然换行配合 balance 处理，减少内容和布局的强耦合。

短标题排版好看不等于把所有内容都硬套进完全统一的模板里，而是给浏览器合适的宽度约束和足够的容错空间。先用默认自然换行保证基础可用性，再给短文本场景加上 text-wrap: balance 优化观感，最后用窄屏适配、字体加载、键盘操作几个维度走完组件验收，最终出来的效果通常比手动硬插换行要耐用得多。