CSS: замена для -webkit-line-clamp в Firefox, IE

Question

Я пытаюсь обрезать длинный текст, используя свойство text-overflow: ellipsis;. Я попробовал этот

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

скрипку: http://jsfiddle.net/TReRs/354/

Он отлично работает в хроме, но -webkit-линейный зажим не поддерживает в Firefox и IE. Может ли кто-нибудь помочь мне, есть ли другие свойства для этого.

Answer 1

JS решение:

var ellipsisText = function (e, etc) { 
    var wordArray = e.innerHTML.split(" "); 
    while (e.scrollHeight > e.offsetHeight) { 
     wordArray.pop(); 
     e.innerHTML = wordArray.join(" ") + (etc || "..."); 
    } 
}; 

Использование:

HTML

<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> 

CSS

.block-with-text { 
    line-height: 1.4em; 
    max-height: 5.6em; /* max: 4 lines */ 
} 

JS

[].forEach.call(document.querySelectorAll(".block-with-text"), function(elem) { 
    ellipsisText(elem); 
}); 

JS Fiddle: http://jsfiddle.net/TReRs/360/