如何制作跨浏览器css省略号？答案

【问题标题】：how to make cross browser css ellipsis?如何制作跨浏览器css省略号？
【发布时间】：2011-08-24 19:51:59
【问题描述】：

我用过这个

p.test {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

但它不适用于 Firefox。而且我没有在其他浏览器上查看。

但我需要跨浏览器兼容方式

【问题讨论】：

stackoverflow.com/questions/4927257/…
@thirtydot - 除了 firefox 之外，所有其他浏览器都支持text-overflow: ellipsis
这实际上已在除 Firefox 之外的所有主要浏览器中实现（将于今年到期的版本 6 中收到此功能）。 (456bereastreet.com/archive/201105/…)
是的 - caniuse.com/#search=text-overflow

【解决方案1】：

Firefox 不支持它。

Firefox 3.x 有一个解决方法，但在 FF4 中也不起作用。

我被告知他们计划在 FF6 中添加支持。

到目前为止，还没有适用于 Firefox 的 CSS 解决方案。有一些尝试成功地接近了一些东西，但没有什么是真正正确的。

我目前的解决方案是放弃省略号，而是做其他事情。我在文本元素的右侧使用淡出效果来为用户提供与省略号类似的视觉提示，它甚至可以与省略号结合使用，因此我们可以支持所有浏览器显示一些无需求助于任何浏览器黑客即可显示文本运行的一种效果。

UPDATE 根据 Ilee 的回答：

从 Firefox 版本 7 开始支持 text-overflow: ellipsis。因此，它是从 FF7、IE7 和 Chrome 开始的主流浏览器的跨浏览器。

【讨论】：

【解决方案2】：

这篇文章已经过时了。从 Firefox 版本 7 开始，它支持文本溢出：省略号。因此，它是从ff7、IE7和chrome开始的主流浏览器的跨浏览器。

【讨论】：