纯 CSS 单行文本溢出追加省略号 | 芒果小站

阿里云服务器 ECS

应用于本站的云服务器

猛击这里查看
阿里云对象存储 OSS

海量、安全、低成本、高可靠的云存储服务

猛击这里查看
阿里云关系型数据库 RDS

把你的 MySQL 迁移到云端

猛击这里查看

1
2
3

切换到精简模式

他说：这里不卖芒果，请另寻他处购买。

阿里云服务器 ECS/阿里云对象存储 OSS/阿里云关系型数据库 RDS

标签数目统计值 456

12

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

css

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

8,221

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

<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>

上一篇 JetBrains PhpStorm 注册码 key license

下一篇警惕！慎重购买万网翔云主机

如果喜欢这篇文章，欢迎订阅芒果小站以获得最新内容。

已经有 12 条群众意见

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

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

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

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

#2
?

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

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

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

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

#4
?

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

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

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

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

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

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

#7
糖豆对糖豆说/2013-01-07 10:02

我用也不行哦。回应

#8
芒果对糖豆说/2013-01-07 10:12

<pre>…</pre> 回应

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

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

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

编辑器切换到 HTML 模式回应

#11
糖豆对芒果说/2013-01-07 11:42

谢谢，解决啦！！！回应

#12

下面我简单说几句