兼容ie的多行文本溢出隐藏，并显示省略号

简单说明：在文本最后一行结尾添加一个遮罩（透明 → 白）遮罩上放省略号。
效果如下↓

html部分

<div class="text"> 你的文本内容吧啦吧啦，多写点方便测试 </div>

css部分

text {
	word-break:break-all;    /* 单词打断，可以让显示美观一些 */
	width: 150px;
	line-height: 20px;    /* 单行文本高度 */
	position: relative;
	overflow: hidden;
}
.text::after {
	content: "..."; 
	position: absolute; 
	bottom: 0; 
	right: 0; 
	padding-left: 20px;    /* 省略号宽度 */
	background: -webkit-linear-gradient(left, transparent, #fff 55%);    /* #fff为遮罩颜色，下同↓ */
	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部分

// 注意，此处使用了jquery，如果不想引入jquery的话可以把下面的jq代码逻辑用js写一遍
$(function(){
 // 获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('.text').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));    // 当前文本行高
        var height = parseInt($(this).height());    // div容器高度
        if((height / lineHeight) >2 ){    // 此处 2 为限制行数
            $(this).addClass("text_after")    // 超过两行添加省略号
            $(this).css("height","40px");    // 此处 40px 对应上面的 2 行（因为css中设置的行高是20px，js中限制的行数为 2 行，所以超出两行后高度固定为40px）
        }else{
            $(this).removeClass("text_after");    // 不足两行删除省略号
        }
    });
})

PS：复制粘贴代码后 可能 需要修改的位置
1.css中的 line-height（设置为你需要的行高）
2.css中遮罩层的颜色（设置为你需要的背景色）
3.js中的限制行数（设置为你需要最大行数）
4.js中超过限制行数后的固定高度（设置为你的 行高 * 最大行数 ）