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

Posted 2023-03-06

【中文标题】如何制作跨浏览器css省略号？

【英文标题】：how to make cross browser css ellipsis?

【发布时间】：2011-08-24 19:51:59

【问题描述】：

我用过这个

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

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

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

【问题讨论】：

***.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 解决方案。有一些尝试成功地接近了一些东西，但没有什么是真正正确的。

有关更多信息，另请参阅此问题：text-overflow:ellipsis in Firefox 4? (and FF5)

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

UPDATE 根据 Ilee 的回答：

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

【讨论】：

相关***.com/questions/802175/…

【参考方案2】：

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

【讨论】：

我不会说过时的。我在 Iceweasel 11 中看到了这个问题。