css实现单行、多行文本溢出显示省略号

通常我们开发前端页面时候经常会遇到文本溢出显示省略号的问题。

如果单行文本溢出的话大家应该知道通常我们会使用text-overflow:ellipsis与width配合实现：

.textOverflow1{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

效果如下所示：(你可以试用调试工具查看全部的文字)
欢迎访问Lidada博客在这里我们可以一起交流前端技术。

这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号就要像下面这样写了:

.textOverflow2 {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
.textOverflow2::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://lidada.org/wp-content/uploads/2017/11/overflow_bg.png) repeat-y;
}

效果如下所示：
欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。
这里注意几点：
height高度真好是

line-height

的3倍；

结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；

IE6-7不显示

content

内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用

<span class="line-clamp">...</span>

去模拟；

要支持IE8，需要将

::after

替换成

:after

；

查看原文：http://lidada.org/text_overflow/