如何设置HTML元素的样式以避免挂起文本？

Question

我正在创建一个页面，其中有一个文本框，显示数据库中的文本字符串，其长度各不相同。因此，一些字符串碰巧足够长到两行，但第二行很短，这看起来不太好：

此处蓝色框显示包含内容的div。它有一个固定的宽度（容器的80％）和text-align:center。

所以我的问题是：如何让文本流入线宽相互接近的行？我愿意做一些数学运算并动态调整宽度或字体大小，但我不确定如何可靠地做到这一点。

Answer 1

你需要JavaScript才能做到这一点。如果您使用动态文本，单独的CSS无法解决此问题。

一旦您检测到盒子的高度超出了一行的限制，您可以缩小字体，展开框或计算中点以添加中断并有两条平衡线。 / p>

以下是各种为您执行此操作的jQuery插件。如果你看，有很多。

http://fittextjs.com/

https://github.com/jquery-textfill/jquery-textfill

Answer 2

个人我不喜欢用javascript来“简单的事情”

您使用以下属性

overflow 
white-space

http://jsfiddle.net/ALWqd/