Multiple lines of text overflow display ellipsis ... __ multiline text Overflow

Today's browsers support the Text-overflow:ellipsis property, which is used to implement a single line of text overflow display ellipsis, but this property does not support multiple lines of text. So is there a way to achieve the same effect on multiple lines of text?
-webkit-line-clamp

WebKit supports a property called-webkit-line-clamp, which is actually a webkit-specific unsupported property, which means that this attribute is not part of the standard and may be used internally by the WebKit. or deprecated attribute. But since being discovered, and can use, why not try it ~o (∩_∩) o

p {
    Overflow:hidden;
    text-overflow:ellipsis;
    Display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

demo:http://jsfiddle.net/cople/mab8f/ -o-ellipsis-lastline

Starting with Opera 10.60, the Text-overflow property has a value named-o-ellipsis-lastline. The applied effect is like a name, with an ellipsis on the last line of the text. This method is much simpler than the upstairs method, but it is not within the standard///(ㄒoㄒ)//

p {
    Overflow:hidden;
    White-space:normal;
    Height:3em;
    Text-overflow:-o-ellipsis-lastline;
}

demo:http://jsfiddle.net/cople/ash5v/ jQuery

In addition to the individual browser proprietary properties, there is no cross-browser solution to it. Of course, through JS implementation. (by removing the end character one after the other until the element's height is less than the parent element height)

$ (". Figcaption"). each (the function (i) {
    var DIVH = $ (this). Height ();
    var $p = $ ("P", $ (this)). EQ (0);
    while ($p. Outerheight () > Divh) {
        $p. Text ($p. Text (). replace (/(\s) * ([a-za-z0-9]+|\w) (\.\.\.)? $/, "..."));
    };
});

Correlation: Truncated character length intercept display ellipsis (...) by byte length
Multi-line text overflow display ellipsis ...