CSS multi-line text ellipsis problem

It is known that the single-line text overflow content is replaced with ellipses, the CSS code is as follows:

text-overflow:ellipsis;    Overflow part with ... instead of White-space:nowrap;     Force show   overflow:hidden;//overflow hidden on one line

Today just came across multiple lines of text overflow, beyond partial use ... Instead of the problem, find some information. Link at the bottom of the original reference page

1:webkit a browser or mobile page

You need to use the WebKit private property, which is not in the CSS draft, so it is not a standard CSS property. The CSS code is as follows

Display:-webkit-box; Display-webkit-box-orient:vertical as a flexible box model;    Sets the arrangement of child elements-webkit-line-clamp:2;    The block element displays the number of lines of text over-flow:hidden;text-overflow:ellipsis;

2: With the inclusion of ... The Elemental Simulation

p {    position:relative;    Line-height:1.4em;    /* 3 times the line-height to show 3 lines */    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;}

Note that: 1: Set hight is an integer multiple of line-hight, so as to prevent text from overflowing under the box, exposing some of the residual words:

2: Pseudo-class: After is set to position:absolute positioning, the purpose is to let the inserted background picture overlay in the bottom right corner of the text box, simulate overflow illusion. You can directly set Background-color to replace the background map.

3:IE6/7 cannot read content, span tags <span>...</span> simulations available;

There are also two small plugins:

JQuery plugin-jquery.dotdotdot and clamp.js not used

Original reference http://www.111cn.net/cssdiv/css/67208.htm

CSS multi-line text ellipsis problem