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

Question

我正在使用text-overflow CSS属性来获取椭圆效果，我相信现在只支持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 HERE找到解决方案。开发人员在他的网站上提供演示程序。它不像纯CSS解决方案那样实现，显然在JS关闭时不起作用，但它是目前用Firefox最接近的。

HTH。