用CSS截断长字符串：可行吗？

Question

用CSS截断长字符串：可行吗？有什么好的方法可以用普通的HTML和CSS来截断文本，这样动态内容就可以适应固定的宽度和高度的布局了吗？我一直在截断服务器端逻辑宽度(即一个盲目猜测的字符数)，但由于‘w’比‘i’宽，这往往是次优，还要求我重新猜测(并不断调整)每个固定宽度的字符数。理想情况下，截断发生在浏览器中，浏览器知道物理呈现文本的宽度。我发现IE有一个text-overflow: ellipsis属性，它完全可以实现我想要的功能，但我需要它是跨浏览器的。这个财产似乎(有点？)标准但不受Firefox的支持。我发现五花八门 解决办法基于overflow: hidden，但它们要么不显示省略号(我希望用户知道内容被截断)，要么一直显示它(即使内容没有被截断)。有没有人有一个很好的方式拟合动态文本在一个固定的布局，或服务器端截断的逻辑宽度是否像我现在要得到的一样好？

Answer 1

该问题的另一个解决方案可能是以下一组CSS规则：

.ellipsis{
 white-space:nowrap;
 overflow:hidden;}.ellipsis:after{
  content:'...';}

上面的CSS唯一的缺点是它会添加“.”无论文本是否溢出容器。不过，如果您有一组元素，并且确信内容会溢出，那么这个规则将是一组更简单的规则。

我的两分钱。贾斯汀·麦克斯韦的原创技巧