文本超出隱藏顯示省略號兼容問題

最近做一個項目的時候遇到一個css兼容性問題，就是限制文本副標題最多顯示三行，隱藏超出部分並顯示省略號，說實話，之前這種東西做了好多，一般都是用css去控制一下，css代碼如下：

display: box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//限制三行
text-overflow: ellipsis;
overflow: hidden;

就是在文本容器上設置高度為行高的三倍，超出隱藏，然后利用 text-overflow: ellipsis; 屬性去顯示省略號，但是這有個問題就是這個屬性兼容性不好，如下：

firfox和ie不支持，之前公司測試沒注意這些細節，現在公司測試要求必須都顯示省略號，想了一下，最后用js來實現，代碼如下：

$(".dealers-list-info").each(function (i) {
    var parentH = $(this).height();//父元素的高度
    var txtBox = $(this).find('p');
    while (txtBox.outerHeight() > parentH) {//對比父元素和子元素的高度
        txtBox.text(txtBox.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

 

原理就是設置文本容器 p 標簽父元素的高度為3倍行高然后不斷對比文本容器p標簽和文本容器父元素 .info 的高度，如果 p 的高度大於 .info高度說明還是超出，就把 p 元素文本后三位用省略號代替直到文本容器p的高度等於 .info的高度說明剛好顯示三行，循環結束。

這種方法其實比較笨，如果文本過長的話會影響性能，想過讓后端去截取文字，但是這是一個國際站，不同語言下的文字長度不同，所幸這個副標題文字也不會太多，暫且先用這種方法，等想到更好的方法了再更。。。