之前一直以为单行文本溢出追加省略号没法兼容所有浏览器,经元泉同志提点,顺利解决:
<a href="//img check this site out.mangguo.org/2012/10/2012-10-23_210300.png”>
样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽无效:
.box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
测试 IE6、IE7、IE8、IE9、Chrome、Firefox 均支持。
在线演示地址:text_overflow_ellipsis.html
版权所有,转载请注明出处。
转载自 <a href="https://mangguo.org/text-overflow-ellipsis/" title="纯 CSS 单行文本溢出追加省略号" rel="bookmark">纯 CSS 单行文本溢出追加省略号 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。
/2012-10-23 21:40高级了,还以为要用到伪元素呢
/2012-10-24 00:20早期的firefox是不支持的,包括3.5~4以后就不知道了~
/2012-10-24 11:23[…] 均支持。 在线演示地址:text_overflow_ellipsis.html © 2010 芒果小站 | 固定链接 | 2 条评论 | 标签 CSS 芒果小站No related posts. […]
/2012-10-25 10:34text-overflow 很少见啊,哈哈
/2012-11-11 16:12[…] 来源:芒果小站 // 推荐: […]
/2012-11-20 21:13很方便的方法,不怕标题太长了
/2013-01-07 09:59芒果哥,我想问下,文中黄色的框架是如何写的?
/2013-01-07 10:02我用也不行哦。
/2013-01-07 10:12<pre>…</pre>
/2013-01-07 10:14http://www.tangdou.cc/63.html 麻烦看下,这样写不行啊。
/2013-01-07 11:07编辑器切换到 HTML 模式
/2013-01-07 11:42谢谢,解决啦!!!