模拟文本溢出：CSS2 中的省略号答案

【问题标题】：Simulate text-overflow: ellipsis in CSS2模拟文本溢出：CSS2 中的省略号
【发布时间】：2011-05-06 17:12:54
【问题描述】：

有没有办法使用 CSS2 模拟text-overflow: ellipsis？

我找到了emulates text-overflow:ellipsis in firefox with CSS 的解决方案，但它不起作用。

我对 JavaScript 解决方案不感兴趣。

【问题讨论】：

【解决方案1】：

在不实际使用text-overflow 的情况下，CSS 中确实没有一种令人满意的方法可以达到与text-overflow 相同的结果。已经尝试了几次，但都没有真正奏效。

我见过的唯一可行的非 Javascript 解决方案是在样式表中使用 -moz-binding 将 XUL 代码块附加到元素，它做了省略号。这在 Firefox 3.x 中运行良好（除了一些副作用），但在 Firefox 4 及更高版本中不再适用，因为出于安全考虑，它们放弃了对绑定功能的支持。

好消息是text-overflow 正在被引入 Firefox，并且应该与 FF7 一起出现（由于它们的加速发布周期，将于今年晚些时候推出）。等待的时间还有一点点，但至少我们知道它现在就要到来了。

与此同时，Firefox 4/5/6 仍然是唯一一个您根本无法在 CSS 中使用省略号且没有任何好的替代方案的主流浏览器

我见过的一个创造性解决方案是在文本元素的右手端使用渐变透明效果，以产生淡出效果，而不是使用省略号。这是一个不同的外观，但提供了与省略号相同的视觉提示，并且可以在大多数浏览器中实现（尽管您可能更愿意使其特定于 Firefox 并继续对所有其他浏览器使用省略号）。

希望对您有所帮助。

顺便说一句，你可能也对我几个月前问过的这个问题感兴趣：text-overflow:ellipsis in Firefox 4? (and FF5)

【讨论】：

【解决方案2】：

这个似乎在除 Ubuntu+Chrome 之外的任何地方都可以工作： http://mattsnider.com/css/css-string-truncation-with-ellipsis/

【讨论】：