如何基于屏幕尺寸实现文本的均匀动态换行？

嘿，这种单行孤零零飘着一个单词的情况真的很影响观感对吧？别慌，用CSS就能轻松搞定，给你几个靠谱的方案，从现代浏览器到兼容场景都覆盖到了：

1. 最省心的现代方案：text-wrap: balance #

这是CSS最新的文本平衡属性，直接让浏览器自动调整换行逻辑，尽量让每行的单词数量均匀，完美避免孤词单行的问题。代码超简单：

.centered-text {
  text-align: center;
  text-wrap: balance; /* 核心属性 */
}

现在Chrome、Firefox、Safari的新版本都支持这个属性了，不用折腾复杂逻辑，直接用就行。如果是更长的段落，还可以试试text-wrap: pretty，它会更注重整体排版的美观度。

2. 兼容老浏览器的回退方案：断字+强制换行 #

如果需要兼容一些旧版本浏览器，或者处理长单词的情况，可以组合这两个属性：

.centered-text {
  text-align: center;
  hyphens: auto; /* 自动按语言规则断字 */
  overflow-wrap: break-word; /* 长单词强制拆分换行 */
}

⚠️ 小提示：要让hyphens: auto生效，记得给文本元素加上对应的lang属性，比如<p class="centered-text" lang="en">...</p>，浏览器会根据语言的断字规则来处理，效果更准确。

3. 窄屏截断：自动显示省略号 #

当屏幕尺寸缩小到连两行都放不下时，我们可以让文本自动截断并显示省略号，避免内容溢出。配合前面的平衡换行，代码如下：

.centered-text {
  text-align: center;
  text-wrap: balance;
  /* 核心截断逻辑 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行，可按需调整 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这套方案用了WebKit的前缀，但现在主流浏览器都支持，足够应对大部分场景。如果需要更复杂的多行截断，才需要考虑JavaScript辅助，但一般这个CSS方案就够用了。

内容的提问来源于stack exchange，提问作者elwc