芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
12

纯 CSS 单行文本溢出追加省略号

css
作者 芒果/分类 代码/发布于 2012-10-23 21:09

之前一直以为单行文本溢出追加省略号没法兼容所有浏览器,经元泉同志提点,顺利解决:


样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽无效:

.box {
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

测试 IE6、IE7、IE8、IE9、Chrome、Firefox 均支持。
在线演示地址:text_overflow_ellipsis.html

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/text-overflow-ellipsis/" title="纯 CSS 单行文本溢出追加省略号" rel="bookmark">纯 CSS 单行文本溢出追加省略号 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 12 条群众意见

  1. 一堵墙 /2012-10-23 21:40

    高级了,还以为要用到伪元素呢 回应

    #1
  2. zhouqicf /2012-10-24 00:20

    早期的firefox是不支持的,包括3.5~4以后就不知道了~ 回应

    #2
  3. ?
    纯 CSS 单行文本溢出追加省略号 | wordpress主题下载|wordpress教程|wordpress 插件| wordpress主机 /2012-10-24 11:23

    […] 均支持。 在线演示地址:text_overflow_ellipsis.html © 2010 芒果小站 | 固定链接 | 2 条评论 | 标签 CSS 芒果小站No related posts. […] 回应

    #3
  4. 向日葵媒体设计 /2012-10-25 10:34

    text-overflow 很少见啊,哈哈 回应

    #4
  5. ?
    纯 CSS 单行文本溢出追加省略号 /2012-11-11 16:12

    […] 来源:芒果小站 // 推荐: […] 回应

    #5
  6. 网盘街 /2012-11-20 21:13

    很方便的方法,不怕标题太长了 回应

    #6
  7. 糖豆 /2013-01-07 09:59

    芒果哥,我想问下,文中黄色的框架是如何写的? 回应

    #7
  8. 糖豆糖豆/2013-01-07 10:02

    我用也不行哦。 回应

    #8
  9. 芒果糖豆/2013-01-07 10:12

    <pre>…</pre> 回应

    #9
  10. 糖豆芒果/2013-01-07 10:14

    http://www.tangdou.cc/63.html 麻烦看下,这样写不行啊。 回应

    #10
  11. 芒果糖豆/2013-01-07 11:07

    编辑器切换到 HTML 模式 回应

    #11
  12. 糖豆芒果/2013-01-07 11:42

    谢谢,解决啦!!! 回应

    #12

下面我简单说几句