HTML 中的平衡文本换行答案

【问题标题】：Balanced text wrapping in HTMLHTML 中的平衡文本换行
【发布时间】：2011-02-23 22:06:03
【问题描述】：

在 HTML 中，有没有一种方法可以均匀地分布跨多行的文本？

例如，我不想要：

这是一些非常长的标签，最终会出现在两条线。

我更喜欢：

这是一些很长的标签以两条线结束。

【问题讨论】：

【解决方案1】：

一种解决方法，但您可以在最后几个单词中使用不间断的空格：

<p>Here is some really long label that ends on&nbsp;two&nbsp;lines</p>

【讨论】：

另一种类似的方法是手动<br> 行，如<p>Here is some really long label<br>that ends on two lines</p>
然而，这不是很敏感。
1.它没有响应。 2. 对动态内容没用 3. 需要在每个实例中手动实现每行受影响的文本。如果他正在寻找一个不灵活的解决方案，只需在所需内容周围添加一个新的最大宽度，或者添加一个空格：nowrap；本来可以提出更实际的解决方案。至少通过媒体查询调整最大宽度在动态内容和响应式布局方面仍然保留了一些灵活性。
是的，确切地说，这不是一个非常棒的通用解决方案，但如果您只需要修复一两个案例并且在每个屏幕尺寸上的外观都不是那么完美的情况下，这可能会有所帮助.

【解决方案2】：

Adobe 已提议添加一个新的 css 属性 text-wrap: balance。

与此同时，他们创建了一个名为 balance-text 的 jQuery 插件来实现相同的结果。

【讨论】：

【解决方案3】：

如果你设置元素容器的固定宽度并使用padding 属性，我认为你可以实现这一点。

【讨论】：

【解决方案4】：

在纯 HTML/CSS 中没有办法做到这一点，因为没有办法测量行的长度。

一种方法是使用 javascript，但您最终会得到一个 FOBUC，而 javascript 会计算行长并相应地拆分它。

避免这种情况的最佳方法是使用 PHP/ASP/无论您使用什么来拆分行。

【讨论】：