在浏览网页时，我们经常能看到这样的一种效果：当文本超出一定范围时，会以省略号（…）显示，并且隐藏多余的文字，如下图所示。

在CSS3中，我们可以使用text-overflow属性来定义文本的溢出样式。

语法：

text-overflow:取值;

说明：

text-overflow的属性取值只有两个，如下表所示。

text-overflow属性取值
属性值 说明
ellipsis 当文本溢出时，显示省略号，并且隐藏多余的文字
clip 当文本溢出时，不显示省略号，而是将溢出的文字裁切掉

实际上，单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果，我们还需要结合white-space和overflow这两个属性来实现，下面是完整的语法：

overflow:hidden; 
white-space:nowrap;
text-overflow:ellipsis;

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div
        {
            width:200px;
            height:100px;
            border:1px solid silver;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
    </style>
</head>
<body>
    <div>绿叶学习网成立于2015年4月1日，是一个最富有活力的Web技术学习网站。在这里，我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点，都体现绿叶精品的态度。没有最好，但是我们可以做到更好！</div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

overflow:hidden;、white-space:nowrap;和text-overflow:ellipsis;这三个是固定搭配的，我们直接搬过去用就可以了。

上面的语法只能实现“单行文本”的省略号效果。如果想要实现“多行文本”的省略号效果（如下图所示），此时又该怎么做呢？

在上图效果中，文字并非都在同一行，我们只是限定某个容器的宽度和高度，对于超出部分再使用省略号来显示。想要实现这种多行文字的省略号效果，单纯使用CSS是无法实现的，必须借助JavaScript或jQuery才行。

这里推荐一个jQuery插件：jquery.dotdotdot.js，感兴趣的小伙伴可以自行搜索一下了解。