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

最近作一個項目的時候遇到一個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的高度說明恰好顯示三行，循環結束。

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

原文出處：https://www.cnblogs.com/changzz/p/10537092.html