此页面由 Cloud Translation API 翻译。

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将自动平衡文字与网页，设计者的传统。

这将并且应该是 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 属性，因为一个请求不换行，而另一个请求均衡封装。如需解决此问题，请取消设置空格属性，然后重新应用平衡换行。

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

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

标题会像之前的开发者工具一样突出显示，这次没有跨越全宽。它在末尾前开始了新行，因此是平衡的文本块。

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

讽刺的是，平衡的文本换行会导致包含的元素不平衡。

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