CSS 文本换行：平衡

CSS 引入了一种经典的排版技术，即为平衡文本块手动编写换行符。

Adam Argyle

text-wrap 的 balance 值属于 CSS 文本级别 4 的一部分。请查看这篇博文中的示例，了解这行 CSS 代码如何显著改善文本布局。

如果没有 text-wrap: balance；设计人员、内容编辑者和发布者就只有很少的工具可以更改线条平衡的方式。最佳方案是使用 <wbr> 或 ­ 来帮助指导文本布局，以便做出更明智的换行和换字位置决策。

作为开发者，您不知道标题或段落的最终大小、字号甚至语言。浏览器中包含处理文本换行效果所需的所有变量，这些变量可以有效且美观地处理文本换行。因此，我们会看到标题换行，如下图所示：

.unbalanced {
  max-inline-size: 50ch;
}

借助 CSS Text 4 中的 text-wrap: balance，您可以请求浏览器为文本找出最平衡的行换行解决方案。浏览器确实知道所有因素，例如字体大小、语言和分配区域。目前，浏览器平衡文本换行结果如下所示：

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

并排查看、静止状态、不叠加调试信息都很有帮助。

现在，您应该会发现，这种平衡的文字块看起来更加舒服。这样可以更好地吸引用户的注意力，并且整体上更易于阅读。

寻找平衡点

标题是读者最先看到的内容，因此应具有视觉吸引力且易于阅读。这样可以吸引用户的注意力，并提供质量和保证。优质的排版能让读者充满信心，从而鼓励他们继续阅读。

传统上，此任务是手动或光学完成的，因为平衡文本的设计师希望取悦眼睛，而不是取悦数学。此主题通常称为公制对齐与光学对齐。对于像纽约时报这样的大型出版物，标题平衡是一项非常重要的用户体验细节。

排版中文本的平衡性可以追溯到印刷术的早期，当时打印工人会手动放置字母。随着工具和技术的不断发展，成效也在不断变化。 如今，设计师可以通过颜色、粗细、大小等元素来平衡设计中的文字。

但在 Web 上，可用的控制较少，因为文档会根据用户改变大小和颜色。text-wrap: balance 基于平面设计行业设计师的工作和传统，以自动化方式将文字平衡艺术引入 Web 领域。

平衡标题

这将是 text-wrap: balance 的主要用例，也应该是主要用例。绘制眼睛并调整大小，使其对称且清晰可辨。使用以下 CSS 将所有标题设置为平衡文本换行：

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

仅应用此样式可能无法获得预期结果，因为文本需要换行，因此需要从某个位置应用行长度上限。您会在此博文的示例中看到设置了 max-inline-size，此样式类似于 max-width，但可以针对任何语言设置一次。

限制

平衡文本的任务并非免费的。浏览器需要循环迭代，以发现最佳平衡的封装解决方案。我们通过一项规则来缓解这种性能开销，该规则仅适用于六行或以下的换行内容。

性能考虑因素

最好不要将文本换行平衡应用于整个设计。由于存在 6 行限制，因此这是一个浪费的请求，可能会影响网页渲染速度。

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

此功能的一大优势在于，您无需像现在使用 JavaScript 那样等待和时间来平衡文本换行与字体加载。浏览器会搞定它！

与 white-space 属性的互动

平衡文本会与 white-space 属性竞争，因为一个要求不换行，另一个要求平衡换行。您可以通过取消设置空白空间属性来解决此问题，然后平衡封装就可以再次应用。

.balanced {
  white-space: unset;
  text-wrap: balance;
}

平衡不会更改元素的 inline-size

某些用于实现平衡文本换行功能的 JavaScript 解决方案具有优势，因为它们会更改包含元素本身的 max-width。这样做的好处是，可以将其“缩减封装”到平衡块中。text-wrap: balance 没有这种效果，如以下示例所示：

您是否注意到，DevTools 中显示的宽度在末尾有大量额外的空间？ 这是因为它只是一种换行样式，而不是尺寸更改样式。因此，至少在我看来，在某些情况下，text-wrap: balance 并不是那么好。例如，卡片内的标题（或任何带有边框或阴影的容器）。

平衡的文本换行会造成所含元素的不平衡。

浏览器所用技术的简要说明

浏览器会有效执行二分搜索，以找到不会导致任何额外行的最小宽度，并在一个 CSS 像素（而非显示像素）处停止。为了进一步减少二分搜索中的步骤，浏览器会从平均线宽的 80% 开始。