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博客在这里我们可以一起交流前端技术。

这里注意几点：

1. height高度真好是line-height的3倍；
2. 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
3. IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
4. 要支持IE8，需要将::after替换成:after；

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