Multiple lines of text overflow display ellipsis (...) The method

Browsers now support text-overflow:ellipsis properties that implement an overflow display ellipsis for single-line text, 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 named, which -webkit-line-clamp is actually a webkit-specific unsupported property, which means that the attribute is not part of the standard, it may be a property used internally by WebKit, or deprecated. But since it was discovered and can be used, 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, like a name, is preceded by an ellipsis in the last line of the text. This method is much simpler than the method upstairs, 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

Is there a cross-browser workaround in addition to the private properties of each browser? Of course, through the JS implementation! (Remove the end character one by one from the back until the height of the element is less than the height of the parent element)

$(". Figcaption").each(function(I){var DIVH= $(This).Height();var $p= $("P", $(This)).eq(0);While($p.Outerheight()> DIVH{$p .text ($p .textreplace (/(\s) * ([ a-za-z0-9]+|\w) (\.\.\.)? $/) };}        

demo:http://jsfiddle.net/cople/drml4/5/

Reproduced in: http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html

Multiple lines of text overflow display ellipsis (...) The method