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

标签 html internet-explorer css graceful-degradation

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

考虑到 text-overflow 依赖于 overflowwhite-space 属性,不确定这是否可行...

非常感谢任何帮助。

最佳答案

对于 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.

关于html - 优雅地降级文本溢出 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6117571/

相关文章:

javascript - Django 问题 : manage. py runserver 错误信息

javascript - 通过 CSS 与 HTML5 Canvas 在网页上移动图像的性能

javascript - 使用 REST API 并发送 POST 请求

javascript - 如何在 jquery 中将 json 数据转换为 html 表?

javascript - 将 QuaggaJs 的宽度设置为 100%?

css - IE9 中的 z-index 分层,例如,检查堆栈上下文(我认为)

internet-explorer - 我只是不知道它是什么,尝试了一切,IE 7 错误

CSS - IE 和 Firefox 之间自定义复选框的困难

javascript - onclick 事件上的转义参数不起作用

jquery - 使多选列表可调整大小