优雅地降级文本溢出CSS属性

Question

我正在使用text-overflowCSS属性来获得椭圆效果，我相信目前只有IE支持这种效果。我的问题是，我并不是在寻找一种变通办法，让它在Firefox中运行，而是在寻找一个在其他浏览器中优雅降级的解决方案，而不是突然截断文本。因此，它将回退到普通的文本换行，而不是Firefox中的省略号。

考虑到text-overflow同时依赖于overflow和white-space属性，不确定这是否可能。。。

非常感谢您的帮助。

Answer 1

对于IE、Safari、Chrome（以及其他Webkit浏览器）和Opera的最新版本，已经支持text-overflow属性。如果您需要支持旧版本的Opera（11.0之前），您可以使用前缀属性，如下所示：

.ellipsis {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

Firefox（和其他基于Gecko的浏览器）根本不支持文本溢出属性，这令人失望，因为它实际上非常有用。但是对于Firefox，您可以使用一些JavaScript来创建省略号。您可以在此处使用JQuery找到解决方案。开发人员在他的网站上提供了一个演示程序。它的实现不如纯CSS解决方案好，当JS关闭时显然不起作用，但它是目前使用Firefox时最接近的解决方案。

HTH。