CSS：替换 Firefox、IE 中的 -webkit-line-clamp

Question

我正在尝试使用text-overflow: ellipsis;截断长文本text-overflow: ellipsis; 财产。 我试过这个

overflow: hidden;
-webkit-line-clamp: 4; 
text-overflow: ellipsis;

小提琴： http : //jsfiddle.net/TReRs/354/

它在 chrome 中运行良好，但-webkit-line-clamp在 Firefox 和 IE 中不支持。 任何人都可以帮助我，是否有任何其他属性。

Answer 1

JS解决方案：

 const ellipsisText = (e, etc) => { const wordArray = e.innerHTML.split(" "); while (e.scrollHeight > e.offsetHeight) { wordArray.pop(); e.innerHTML = wordArray.join(" ") + (etc || "..."); } }; [].forEach.call(document.querySelectorAll(".block-with-text"), function(elem) { ellipsisText(elem); });

 .block-with-text { padding: 10px 0 0 0; display: block; display: -webkit-box; height: 85px; width: 200px; margin: 0 0 15px 0; font-size: 14px; line-height: 1.4; line-height: 1.4em; max-height: 5.6em; /* max: 4 lines */ }

 <div class="block-with-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi ut aliquip ex ea commodo consequat sum dolor sit 123 </div>