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

工作的过程中难免需要对文本限制字数，超出部分显示省略号，单行的我们知道如下：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

那么多行的怎么办，之前一般写的是：

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

但是适用范围只局限与浏览器内核是webkit的，下面这种虽然兼容，但是对没达到行数要求的依然显示省略号，那么怎么达到即兼容浏览器又能在我们规定的行数超过之后显示省略号呢

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

那么，我们决定用js来优化上面这段代码。
css:

 p {
   position: relative;
    margin:20px auto;
    width: 286px;
    font-size: 13px;
    color: #868789;
    line-height: 17px;
    text-align: left;
    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");
        }
    });
})

html:

<p>唧唧复唧唧，木兰当户织，不闻机杼声，惟闻女叹息。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵。军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄。愿为市鞍马，从此替爷征。东市买骏马，西市买鞍鞯。南市买辔头，北市买长鞭。不闻爷娘唤女声，只闻黄河之水鸣溅溅。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈p>
<p>唧唧复唧唧，木兰当户织，不闻机杼声，惟闻女叹息。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵。军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄。愿为市鞍马，从此替爷征。p>
<p>该螺母通常用于公共场所以保护标识、照明装置和显示器。Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个未知的印刷者制作了一个活版盘的类型.p>

效果如图：