文本超出隐藏显示省略号兼容问题

最近作一个项目的时候遇到一个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