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

【问题标题】：CSS: replacement for -webkit-line-clamp in Firefox, IECSS：在 Firefox、IE 中替换 -webkit-line-clamp
【发布时间】：2017-03-29 02:48:52
【问题描述】：

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

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

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

它在 chrome 中运行良好，但 -webkit-line-clamp 在 Firefox 和 IE 中不支持。谁能帮帮我，有没有其他属性。

【问题讨论】：

看看stackoverflow.com/questions/18763551/…
这也可能对您有所帮助：css-tricks.com/line-clampin

标签： css internet-explorer firefox cross-browser

【解决方案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>

【讨论】：