div内居中文本换行时如何从中间均分拆分而非仅末尾单词单独换行

你需要的均衡换行效果可以通过CSS原生属性text-wrap: balance实现，该属性会自动计算换行断点，让多行文本的宽度尽可能接近，刚好解决只有单个末尾单词掉到下一行的问题。

你可以在原有CSS基础上新增该属性即可：

div {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  text-wrap: balance;
}

如果需要兼容更低版本的浏览器，可以使用以下备选方案：

• 在你期望允许换行的短语间隙插入<wbr>标签，浏览器换行时会优先选择这些位置拆分文本
• 在长单词的音节间隙插入软换行符­，换行时会自动展示连字符保证可读性

text-wrap: balance目前已支持Chrome 114+、Firefox 121+、Safari 17.4+，覆盖绝大多数现代设备，常规业务场景可以直接使用。

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