CSS文本平衡排版 text-wrap:balance

本文翻译自 CSS Text balancing with text-wrap:balance
，略有删改

您是否曾经希望 CSS 中有一种原生能力可以使两行标题在每行字数上保持一致？作为一名设计师，我在设计网站或 UI 时处理不同的内容长度时经常发现这一点。

这样的情况会让你感觉 UI 效果不平衡，或者缺少一些东西。如下图所示：

突出显示的单词是位于一行中的单个单词。从视觉的角度来看，这看起来很奇怪，它打破了原本的视觉设计效果。

当我在像 Figma 这样的工具中进行设计时，我故意将最后一个词移到上一行，只是为了避免这种不一致的问题。

这样看起来效果是不是更好呢？

在代码中，如果平衡很重要，我们可以通过使用 <br> 手动完成，或者用 <span> 分隔内容的另一部分。还有一些方法可以通过使用 <wbr> 元素而不是句子来提示浏览器何时打断单词。

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

CSS 中的文本平衡

幸运的是，我们现在在 Chrome Canary 版本中对 text-wrap: balance 提供了实验性支持。浏览器会自动计算单词的数量，并将它们平分在两行中。

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

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

这样，标题内容就会平衡，不会在某一行中有一个单词。

接下来让我们更详细地探讨一下。

在元素上设置 Max-Width 的文本平衡

请注意，使用文本平衡不会影响元素的宽度。如下图所示。

标题的最大宽度为 630px 。当有 text-wrap: balance 时，会对齐每行字数，max-width 不受影响。

同样的事情也会发生在容器很小的时候，比如卡片标题。它只会影响容器中的单词。

用例和示例

让我们探索一下 text-wrap: balance 的用处。

页面标题

页面标题是可能首先吸引用户眼球的东西。这是一个没有平衡的例子：

使用之后的效果。

卡片标题

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

使用之后的效果。

提示文字

我们经常会使用工具提示向用户显示重要信息，它可能是几个字或多行。
下面这个提示，其中有一个单词位于单独一行中。

增加 text-wrap: balance后的效果。

.tooltip p {
    text-wrap: balance;
}

Modal标题

我们可能有一个跨越多行的Modal标题，在它的最后一行中看到一个单词可能会在视觉上感觉不太友好。

增加 text-wrap: balance后的效果。

FAQ

另一个我认为 text-wrap: balance 有很大潜力的例子是常见问题解答列表。

增加 text-wrap: balance后的效果。

文本平衡不会影响元素的宽度

当无法控制元素宽度时，我不确定是否使用 text-wrap: balance 。在某些设计中，它会留下很大的空间，使设计在我看来更糟。

注意粉红色轮廓中文本的宽度。应用文本平衡后，宽度将保持不变，只有文本会重新排序。这会让右侧留下一个很大的空白，会使设计效果不平衡。所以针对这类固定宽度的场景需要斟酌使用。

性能限制

目前，该功能仅限于 4 行。也就是说，它主要用于标题或几行的段落。

参考

css-text-wrap-balance

valdef-text-wrap-balance

最后

这是一个很不错且实用的功能，应用到的场景也挺多，但是目前还是在实验阶段，真正可以线上环境使用还需要一定的时间，但是可以提前了解一下发展的趋势。看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）