希望 CSS 中有一种原生能力可以使两行标题在每行字数上保持一致？作为一名设计师，我在设计网站或 UI 时处理不同的内容长度时经常发现这一点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
这样的情况会让你感觉 UI 效果不平衡，或者缺少一些东西。如下图所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
突出显示的单词是位于一行中的单个单词。从视觉的角度来看，这看起来很奇怪，它打破了原本的视觉设计效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
当我在像 Figma 这样的工具中进行设计时，我故意将最后一个词移到上一行，只是为了避免这种不一致的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
这样看起来效果是不是更好呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
在代码中，如果平衡很重要，我们可以通过使用 <br> 手动完成，或者用 <span> 分隔内容的另一部分。还有一些方法可以通过使用 <wbr> 元素而不是句子来提示浏览器何时打断单词。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
还有有一个名为 React Wrap Balancer 的 React 组件，也可以使文本在调整大小时动态平衡。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
CSS 中的文本平衡
幸运的是，我们现在在 Chrome Canary 版本中对 text-wrap: balance 提供了实验性支持。浏览器会自动计算单词的数量，并将它们平分在两行中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
我们只需要应用CSS text-wrap: property 属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
.c-hero__title {
max-width: 36rem;
text-wrap: balance;
}这样，标题内容就会平衡，不会在某一行中有一个单词。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
接下来让我们更详细地探讨一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
在元素上设置 Max-Width 的文本平衡
请注意，使用文本平衡不会影响元素的宽度。如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
标题的最大宽度为 630px 。当有 text-wrap: balance 时，会对齐每行字数，max-width 不受影响。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
同样的事情也会发生在容器很小的时候，比如卡片标题。它只会影响容器中的单词。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
用例和示例
让我们探索一下 text-wrap: balance 的用处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
页面标题
页面标题是可能首先吸引用户眼球的东西。这是一个没有平衡的例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
使用之后的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
卡片标题
这是一种常见的模式，您可能会在其中发现具有不同标题的文章列表。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
使用之后的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
提示文字
我们经常会使用工具提示向用户显示重要信息，它可能是几个字或多行。
下面这个提示，其中有一个单词位于单独一行中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
增加 text-wrap: balance后的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
.tooltip p {
text-wrap: balance;
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
Modal标题
我们可能有一个跨越多行的Modal标题，在它的最后一行中看到一个单词可能会在视觉上感觉不太友好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
增加 text-wrap: balance后的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
FAQ
另一个我认为 text-wrap: balance 有很大潜力的例子是常见问题解答列表。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
增加 text-wrap: balance后的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文本平衡不会影响元素的宽度
当无法控制元素宽度时，我不确定是否使用 text-wrap: balance 。在某些设计中，它会留下很大的空间，使设计在我看来更糟。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
注意粉红色轮廓中文本的宽度。应用文本平衡后，宽度将保持不变，只有文本会重新排序。这会让右侧留下一个很大的空白，会使设计效果不平衡。所以针对这类固定宽度的场景需要斟酌使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
性能限制
目前，该功能仅限于 4 行。也就是说，它主要用于标题或几行的段落。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html
最后
这是一个很不错且实用的功能，应用到的场景也挺多，但是目前还是在实验阶段，真正可以线上环境使用还需要一定的时间，但是可以提前了解一下发展的趋势。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38726.html