About ellipsis multiline line-wrapping scheme

WebKit a browser or mobile page
In WebKit browser or mobile (most of the WebKit kernel browser) page implementation is relatively simple, you can directly use the WebKit CSS extension properties (WebKit is a private property)-webkit-line-clamp; Note: This is a The non-canonical attribute (unsupported WebKit property), which does not appear in the draft CSS specification.

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties.

overflow:hidden;text--webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;

This property is more suitable for browsers WebKit browsers or mobile (mostly WebKit cores).

Browser-compatible scenarios
A relatively simple way is to set the relative positioning of the container height, with the inclusion of ellipses (...) Implementation of elemental simulation;

p {    position:relative;    line-height:1. 4em;     /*  * *    Height:4. 2em;    Overflow:hidden;} P::after {    content:"...";    Font-weight:bold;    Position:absolute;    Bottom:0;    Right:0;    padding:0 20px 1px 45px;    Background:url (http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;}

About ellipsis multiline line-wrapping scheme