CSS text-wrap:balance

你是否曾经希望在 CSS 中有一种本地方式，可以使两行标题中每行的单词数量保持一致？作为一名设计师，当我在设计网站或用户界面时，经常会遇到内容长度不同的情况。
这样的情况会让你正在处理的用户界面感觉不平衡，或者感觉缺少了些什么。我举个例子来说明：

高亮显示的词是在其行上独自存在的一个单词。从视觉角度来看，这看起来很奇怪。它破坏了视觉上的均衡。

当我在像 Figma 这样的工具中设计时，我会故意将最后一个单词移到前一行，只是为了避免不一致性。

这样看起来更好，不是吗？

在代码中，如果平衡很重要，我们可以通过手动使用 <br>，或者用 <span> 分隔内容的其他部分来实现。通过使用<wbr>元素，我们可以向浏览器提供有关何时断开一个单词的提示，但不能断开一个句子。

有一个名为 React Wrap Balancer 的 React 组件，可以在调整大小时动态地使文本平衡。

CSS 中的文本平衡

幸运的是，我们现在有了对 text-wrap: balance 的实验性支持。浏览器会自动计算单词数，并将它们平均分配到两行中。

我们只需要应用 text-wrap: property。

.c-hero__title {
  max-width: 36rem;
  text-wrap: balance;
}

通过这样做，标题内容将会被平衡，我们就不会在其行上有单个单词了。

让我们更详细地探讨一下这个问题。

在元素上设置 max-width 的文本平衡

重要的是要记住，使用文本平衡不会影响元素的宽度。

标题的最大宽度为 630px。当使用 text-wrap: balance 时，它会使每行的单词数量保持一致，并且最大宽度不会受到影响。

当容器很小时，例如卡片标题，情况也是一样的。它只会影响容器内的单词。

示例

让我们探讨一下在哪些情况下text-wrap: balance可能会有用。

页面标题

页面标题是可能会引起用户注意的第一件事情。以下是一个没有平衡的示例：

平衡的文本：

卡片标题

这是一种常见的模式，您可能会发现一个具有不同标题的文章列表。

通过 CSS 中的文本平衡，可以轻松解决这个问题：

.card__title {
  text-wrap: balance;
}

工具提示

我们经常使用工具提示向用户显示重要信息。它可能是几个单词或多行。

这是一个工具提示，其中一个单词位于其行上。

使用 text-wrap: balance 的修复版本。

.tooltip p {
  text-wrap: balance;
}

模态框

通常情况下，我们可能会有一个跨越多行的模态框标题。看到一个单词在其行上可能会让人感觉很不舒服。

通过文本平衡，它会看起来更好：

.modal__title {
  text-wrap: balance;
}

常见问题

我看到 text-wrap: balance 在 FAQ 列表中有很好的潜力。

文本平衡后:

##文本平衡不会影响元素的宽度
我对在无法控制元素宽度时使用text-wrap: balance感到不确定。在某些设计中，它可能会留下一个大的空白，我认为这会让设计变得更糟。
考虑以下情况：

.blockquote {
  max-width: 20rem;
}

.blockquote p {
  text-wrap: balance;
}

注意文本在粉色轮廓的宽度。当应用文本平衡时，宽度将保持不变，只有文本会被重新排序。

这是我之前展示的工具提示示例中的类似问题：

我可以告诉你，根据过去的经验，这不会让设计师满意。这是一个使设计感觉不平衡的大白空间。

如果，例如，我们可以打开一个选项让 text-wrap: balance 影响元素的宽度会怎么样呢？

.element {
  text-wrap: balance;
  width: fit-content;
}

关键词 fit-content 将强制使元素宽度与新的平衡文本匹配，但这只是一个想法。我相信这个想法可能会被更好的东西替代，但你明白了。

目前，该功能仅限于 4 行。这意味着它主要适用于具有几行标题或段落。