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

在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,感兴趣的小伙伴可以自行搜索一下了解。