使用 text-overflow:ellipsis 实现 CSS 单行文本溢出追加省略号

[ 博客 ]

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

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

上面 CSS 第一行是设置强制文本在一行内输出,第二行是设置溢出处理方式,这里是隐藏,第三行是设置文本溢出的处理方式,这里是末尾加上省略号,第四行是兼容 opera 处理,第五行是容器宽度,必须设定。这样简单处理下,就能完美实现文本溢出省略号了。

测试 IE6、IE7、IE8、IE9+、Chrome、Firefox、Opera 均支持。

发表评论

您的个人信息将得到保护,邮箱不会被公开。