兼容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中超過限制行數後的固定高度（設置爲你的 行高 * 最大行數 ）