CSS text-wrap: balance

一种用于手动编写换行符以实现平衡文本块的经典排版技术现已引入 CSS。

Adam Argyle

balance 的 text-wrap 值是 CSS Text Level 4 的一部分。请查看本文中的示例，了解这一行 CSS 如何大幅改进文本布局。

如果没有 text-wrap: balance，设计人员、内容编辑人员和发布商 几乎没有工具 可以更改行的平衡方式。最好的选择是使用 <wbr>或 ­，帮助 文本布局做出更明智的决策，确定在何处断行和断字。

作为开发者，您不知道标题或段落的最终大小、字号，甚至不知道语言。有效且美观地处理文本换行所需的所有变量都在浏览器中。这就是我们看到标题换行的方式，如下图所示：

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

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

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

并排查看这些示例非常有用，而且没有叠加调试信息。

平衡的文本块应该更赏心悦目。它能更好地吸引注意力，而且整体上更易于阅读。

寻找平衡

标题是读者首先看到的内容；它们应该在视觉上具有吸引力且易于阅读。这样可以吸引用户的注意力，并提供质量和保证感。良好的排版可以给读者带来信心，鼓励他们继续阅读。

传统上，这项任务是手动完成的，或者通过光学方式完成，因为设计人员平衡文本是为了让眼睛感到愉悦，而不是为了数学。此主题通常称为指标与光学对齐。对于《 纽约时报》等大型出版物， 标题平衡是非常重要的用户体验细节。

排版中的平衡文本可以追溯到印刷的早期，当时印刷商会手动放置字母。随着工具和技术的发展，结果也在不断发展。 如今，设计人员可以使用颜色、粗细、大小等来平衡设计中的文本。

不过，在网络上，可用的控制较少，因为文档会根据用户更改大小和颜色。text-wrap: balance 以自动方式将平衡文本的艺术带到网络上，并以印刷行业设计人员的工作和传统为基础。

平衡标题

这将是，也应该是 text-wrap: balance 的主要用例。通过大小吸引眼球，使其对称且清晰易读。使用以下 CSS 将所有标题设置为平衡文本换行：

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

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

限制

平衡文本的任务并非免费。浏览器需要循环迭代才能发现最佳平衡换行解决方案。此性能开销通过规则来缓解，它仅适用于六行及以下的换行 。

性能考虑因素

将文本换行平衡应用于整个设计并不是一个好主意。由于六行限制，这是一个浪费的请求，并且可能会影响页面渲染速度。

* {
  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;
}

平衡不会更改元素的内联大小

一些 JavaScript 解决方案对于平衡文本换行具有优势，因为它们会更改包含元素本身的 max-width。这还有一个额外的好处，即“收缩包装”到平衡块。text-wrap: balance 没有这种效果，可以在此示例中看到：

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

具有讽刺意味的是，平衡文本换行会给包含的元素带来不平衡。

对浏览器使用的技术的简要说明

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