本文翻译自 [CSS Text balancing with text-wrap:balance
](https://ishadeed.com/article/css-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）