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

CSS 中是否有一个内置功能可以使两行标题的字数一致线？和设计师一样，我在设计网站或用户界面时处理不同的内容长度时总是发现这一点。

类似的情况会让您感觉 UI 不平衡或缺少某些内容。如下图：

突出显示的单词是放置在一行上的单个单词。从视觉角度来看，这看起来很奇怪并且破坏了视觉设计。

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

这样是不是更好看？

在平衡性很重要的代码中，我们可以使用
手动完成平衡，或者使用 分隔内容的另一部分。还有一些方法可以通过使用 元素而不是句子来告诉浏览器何时断词。

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

CSS 中的文本平衡

幸运的是，我们现在对 文本换行提供了实验性支持： 版本 CanaryChrome 中的平衡。浏览器会自动计算单词数并将其平均分成两行。

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

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

这样标题内容就会平衡，不会出现一行独字的情况。

让我们更详细地研究一下这一点。

设置元素上文本平衡的最大宽度

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

页眉的最大宽度为630px。当存在 text-wrap:balance 时，每行字数会调整，max-width 不受影响。

当容器很小时也会发生同样的事情，就像卡片的标题一样。它只影响容器中的单词。

使用示例和示例

让我们探索一下文字换行：平衡的应用。

页面标题

页面标题可能是最先引起用户注意的内容。这是一个缺乏平衡的例子：

使用后的效果。

短标题

这是一种常见的模式，您可以在其中找到具有不同标题的文章列表。

使用后的效果。

提示文字

我们经常使用工具提示来向用户展示重要信息，它可以是几个单词或几行。
这是一个单独一行有一个单词的提示。

添加文字换行后的效果：平衡。

.tooltip p {
    text-wrap: balance;
}

模态标题

我们可能有一个跨越多行的模态标题，并且在最后一行看到一个单词可能感觉不太友好。

添加文字换行后的效果：平衡。

常见问题解答

我认为文本换行：余额具有巨大潜力的另一个例子是常见问题解答列表。

添加文字换行后的效果：平衡。

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

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

注意粉红色轮廓中文本的宽度。应用文本平衡后，宽度将保持不变，只有文本会重新排列。这会在右侧留下很大的空白，这会让设计看起来不平衡。因此，请考虑将其用于这些类型的固定宽度场景。

性能限制

目前此功能仅限于 4 行。即主要用于标题或几行的段落。

最后

这是一个非常好又实用的功能，可以在很多场景下使用。然而，它仍处于实验阶段。在在线环境中变得真正有用​​需要一些时间，但您可以提前了解开发情况。的倾向。