CSS: replacement for -webkit-line-clamp in Firefox, IE

Question

I am trying to truncating a long text using text-overflow: ellipsis; property. I tried this

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

Fiddle : http://jsfiddle.net/TReRs/354/

It works fine in chrome, but -webkit-line-clamp is not supporting in Firefox and IE. Can anyone help me, is there any other properties for that.

Answer 1

JS solution:

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>