仅使用 CSS 将文本分成均匀的行长答案

【问题标题】：Break text into even line lengths with CSS only仅使用 CSS 将文本分成均匀的行长
【发布时间】：2012-04-10 03:07:55
【问题描述】：

我有一个div 应用了text-align: center。它应该能够包含可能会或可能不会换行的各种文本。当它换行时，我想让每一行的长度大致相同，所以它会显示：

棕色狐狸快速跳跃

在懒惰的狗身上。

代替：

敏捷的棕狐跳过懒惰的人

狗。

基本上，我正在寻找一种纯 CSS 方式来自动将中断放置在文本中心附近。

我知道有 JavaScript 解决方案，并且我目前已经实现了一个服务器端解决方案，但我一直在努力学习更多 CSS 以使将来的事情更加灵活。

【问题讨论】：

标签： css

【解决方案1】：

我很确定你不能用 css 做到这一点，但你不能用 html 控制断点。

<nobr>The quick brown fox jumps</nobr><nobr>over the lazy dog.</nobr>

应该给你你想要的结果。您也可以在不想换行的单词之间粘贴&nbsp;，例如：The&nbsp;quick&nbsp;brown&nbsp;fox&nbsp;jump over&nbsp;the&nbsp;lazy&nbsp;dog. 会得到相同的结果。

【讨论】：

【解决方案2】：

将不想破坏的部分放在禁止包装的span标签中：

<span style="white-space: nowrap">The quick brown fox jumps</span>
<span style="white-space: nowrap">over the lazy dog.</span>

（我知道这是旧的，但我只是去找这个。）

【讨论】：

【解决方案3】：

如果减少 div 的宽度会怎样？否则我不确定你是否可以仅使用 CSS 来实现

【讨论】：