CSS: Ersatz für -webkit-line-clamp in Firefox, IE

Ich versuche zu kürzen einen langen text mit text-overflow: ellipsis; Eigenschaft.
Ich habe versucht, diese 

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

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

Es funktioniert in chrome, aber -webkit-line-clamp ist die Unterstützung nicht in Firefox und IE. Kann mir jemand helfen, gibt es andere Eigenschaften, die für, die.

InformationsquelleAutor NNR | 2016-11-15
  1. 3

    JS-Lösung:

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

    Verwendung:

    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/

    InformationsquelleAutor Văn Quyết
Schreibe einen Kommentar