多行文本溢出显示省略号，并兼容IE

原文：https://blog.csdn.net/janessssss/article/details/80450819

//单行文本溢出显示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

这种方法适用范围只局限与浏览器内核是webkit的，不兼容ie

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

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

下面这种方法是可行的，可以兼容ie

p {
   position: relative;
    line-height: 17px;
    overflow: hidden;

}
.p-after:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

js

$(function(){
 //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >5 ){
            $(this).addClass("p-after")
            $(this).css("height","85px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})