CSS 多行文本溢出省略号显示

前端页面中，有时想让多余的文字在末尾用省略号"..."代替，想要达到大致如下图效果：

其实以上的效果的实现并不难，可以通过以下CSS解决：

overflow:hidden;//内容溢出处理

white-space:nowrap;//文字超出时不换行

text-overflow:ellipsis;//文字溢出处理

那么接下来将进入本文的重点，就是想要在多行后的末尾显示 “...”，该怎么办呢。  对于chrome浏览器实现比较简单，可以直接使用 webkit 的CSS扩展属性-webkit-line-clamp，当然，还需配合其他webkit属性。注意：这些属性并没有列入W3C标准中。具体实现如下图所示：

overflow:hidden;

-webkit-line-clamp:3;//设置文字显示行数

-webkit-box-orient:vertical;//必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

display:-webkit-box;//必须结合的属性，将对象作为弹性伸缩盒子模型显示 。

text-overflow:ellipsis;//可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本

以上只适用于Webkit内核的浏览器，若要兼容其他浏览器，可以添加通过以下方式：

注意：使用这种方式需设置容器的高度。另外，IE8下不认识:after，必要时可以改为::after  以及IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟.