前端页面中，有时想让多余的文字在末尾用省略号"..."代替，想要达到大致如下图效果：
其实以上的效果的实现并不难，可以通过以下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>去模拟.
网友评论