Multi-Line Text overflow display ellipsis (...) Method

All browsers currently supporttext-overflow:ellipsisThis attribute is used to display the ellipsis in a single line of text. However, this attribute does not support multiple lines of text. Is there a way to achieve the same effect on multiple texts?

-WebKit-line-clamp

WebKit supports-webkit-line-clampIt is actually a WebKit-specific unsupported property, that is to say, this property is not a part of the standard, may be used inside WebKit, or is discarded. But since it was discovered and can be used, why not try it ~ O (partition _ partition) 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

Since opera 10.60, the text-overflow attribute has a name-o-ellipsis-lastline. The effect after the application is like the name, and the ellipsis is added to the last line of the text. This method is much easier than the upstairs method, but unfortunately it is not within the standard )//

p {    overflow: hidden;    white-space: normal;    height: 3em;    text-overflow: -o-ellipsis-lastline;}

Demo: http://jsfiddle.net/Cople/ash5v/

Jquery

Besides the private attributes of various browsers, is there any cross-browser solution? Of course it is implemented through JS! (Delete the end characters one by one from the back to the front until the height of the element is smaller 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.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));    };});

Demo: http://jsfiddle.net/Cople/DrML4/5/

Htmljquery tutorial

In addition to the reprinted content, this article is an original article. Reprinted Please note: Article Reprinted from: Xiaoying Zhi (http://c7sky.com /)

Multi-Line Text overflow display ellipsis (...) Method