html - 优雅地降级 text-overflow CSS 属性

Question

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

不确定这是否可能考虑text-overflow取决于overflow和white-space属性...

任何帮助是极大的赞赏。

Answer 1

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

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

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

HTH。