关于用css实现的文字超出部分显示省略号

浏览数：45 / 时间：2015年06月09日

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了，于是研究了一番，现总结如下：

我们先来看下HTML代码：

<div>
    <p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p>
</div>

CSS代码：

div{
    width: 200px;
}
 span{
    display: block;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

我们可以看到其中可用到了text-overflow:ellipsis;网上说这是一个IE特有的属性，别的浏览器不支持，经过实践，现在chrome和火狐都已经支持了，

在chrome下的效果：

我的chrome版本号：

在火狐下的效果：

我的火狐版本号：

又说opera不支持text-overflow，针对Opera的话得使用-o-text-overflow:ellipsis;欧朋浏览器还没有装所以无法实践，但通过网上查找已经找到答案，有博主说自己新版的欧朋已经支持这个属性了，看博客时间是2012年，看来也是早就支持了的。

而且CSS中的这些属性不能少，否则不能显示省略号。可以顺着这样的思路来，要把文本限制在一行(white-space:nowrap;（white-space属性声明建立布局过程中如何处理元素中空白符）),这一行有宽度(width)，有宽度就有超出的部分，将超出的部分隐藏起来(overflow:hidden;)，然后后面跟上省略号(text-overflow:ellipsis;)。

还有一种非常规的方法补省略号，要用到伪对象after,思路是一个标签作内容，再加一个标签作填补省略号用，并且加起来的宽度不能超过它们容器的宽度，否则就换行。

来看下CSS代码：

span{
                display: block;
                width: 200px;
                overflow: hidden;
                white-space: nowrap;
            }
            p{
                clear: both;
            }
            p span{
                float: left;
                max-width: 175px;
            }
            p:after{
                content: "...";
            }

这样能有省略号的效果，但会有小小的问题，我们一起来看下效果：