CSS text-wrap: balance 怎样改善多行标题换行

多行标题最后一行只剩一两个词时，先不要用
硬拆，也不要给标题写死高度。对短标题、卡片标题和小段说明，可以先使用 text-wrap: balance，让浏览器在可接受的范围内重新安排软换行，使每行长度更接近。

官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

text-wrap: balance 主要改善短文本的排版观感；容器宽度、字体、字号和最大行数仍然决定最终结果。它不是把所有文字强行平均分配，也不会替代响应式布局。

text-wrap: balance 解决什么问题

text-wrap 是控制文本软换行方式的 CSS 简写属性，常用的 balance 值会尽量平衡多行文本的字符数量。它适合标题、卡片标题、图注和短引文等行数有限的内容；正文长段落不应默认全部使用它。

标题最终能否变成两行，还取决于可用宽度、字体度量、字号、字重和语言本身的断词规则。balance 只是参与换行决策，所以同一段文本在不同卡片宽度下仍可能出现不同结果。

最小写法：让标题的两行长度更接近

先把规则放在标题组件上，保留正常的宽度约束。下面的示例用两张卡片对比普通换行和平衡换行，代码中的注释说明了策略作用与尺寸边界。

    用 CSS 让卡片标题在窄屏中自然换行
  
  

    用 CSS 让卡片标题在窄屏中自然换行
  

如果标题仍然只显示一行或变成三行，先检查卡片实际宽度、字体是否加载完成，以及是否存在 white-space: nowrap、固定高度或过大的字重。不要把这些布局因素误判为 balance 失效。

兼容性：把 balance 当作渐进增强

不支持 text-wrap: balance 的浏览器会忽略这条声明，通常回到默认的 wrap。因此最简单的兼容方案就是先写普通值，再写增强值，让后声明在支持时覆盖前一条。

.card-title {
  /* 旧环境至少保留正常换行，不依赖脚本重排标题。 */
  text-wrap: wrap;
  /* 支持 balance 的环境再改善短标题的行长分布。 */
  text-wrap: balance;
}

@supports (text-wrap: balance) {
  .hero-title {
    /* 只对短标题启用增强，避免长正文承担额外排版成本。 */
    text-wrap: balance;
  }
}

这类 CSS 回退不需要 JavaScript 检测，也不需要复制一套标题文本。旧浏览器看到第一条有效声明，支持新能力的浏览器继续采用第二条。若产品必须保证某种固定断行，应在设计层提供可接受的最小宽度和字号，而不是把兼容压力交给脚本。

balance、pretty 和 nowrap 有什么区别

MDN 对 balance 的说明强调了它适合有限行数的文本；不同浏览器对可平衡的行数有实现边界。实际组件中，应把它限定在标题和短说明，而不是给所有段落统一设置。

卡片组件里如何避免布局副作用

卡片标题的换行改善后，卡片高度可能仍然不同。若卡片需要对齐按钮，应该用网格或弹性布局安排内容区域，而不是给标题设置固定高度并隐藏溢出。

.product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}

.product-card__title {
  /* 标题可以自然增加一行，主体区域用 1fr 吸收高度差。 */
  min-width: 0;
  text-wrap: balance;
}

.product-card__action {
  /* 操作区固定在卡片末端，但不截断标题内容。 */
  margin-top: 1rem;
}

min-width: 0 对网格子项很重要：没有它时，长单词、英文标识或未断开的 URL 可能撑大网格轨道，让你误以为换行属性没有作用。中文标题也应配合合理的 line-height 和可读的最大宽度。

兼容性、回退与组件检查

上线前可以按下面的顺序检查，不需要把检查写成发布阻断脚本：

1. 用最窄的预期卡片宽度查看标题是否溢出、截断或出现不可读的孤行。
2. 暂时关闭自定义字体，确认字体加载前后的换行变化不会破坏卡片高度。
3. 确认标题没有同时受到 white-space: nowrap、固定高度和 overflow: hidden 的组合限制。
4. 对不支持 balance 的环境保留普通 wrap 路径，文字内容不能因为增强属性缺失而消失。
5. 让屏幕阅读器仍按完整标题读取，视觉上的平衡换行不应通过拆分多个重复节点实现。

什么时候不该使用 text-wrap: balance

如果文本来自用户输入、长度可能达到多段，或者内容处于 contenteditable 编辑状态，就要谨慎使用 balance。编辑中的文本更需要稳定的光标和行布局；对长正文来说，普通 wrap 或针对孤行的 pretty 更容易控制成本。

同样，不要用它替代语义上的人工断行。品牌名称、命令、短代码和文件名可能需要保持不可拆分；这时应先处理词边界、字体和容器，再决定是否使用 nowrap，并准备溢出策略。

速查总结

相关问题

text-wrap: balance 会把标题强制变成两行吗？

不会。它会参与软换行决策，但最终行数仍由文本长度、字体和容器宽度决定。容器足够宽时，标题可能保持一行。

为什么设置 balance 后最后一行仍然很短？

先看标题实际行数、容器宽度和字体加载状态，再检查是否有硬换行或 nowrap。balance 只在有限行数和可行断词位置内优化，不会突破布局边界。

需要用 JavaScript 计算每行文字长度吗？

通常不需要。优先使用 CSS 的渐进增强；只有业务确实需要完全不同的排版规则时，才考虑额外脚本，并保留普通文本回退。