CSS control text, out of section display ellipsis

Http://www.daqianduan.com/6179.html

<pstyle="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">

If the implementation of a single line of text overflow display ellipsis students should know to use the Text-overflow:ellipsis attribute, of course, also need to add width of the genus to be compatible with some of the browsing.

Implementation method:

Overflow: hidden;  Text-overflow:ellipsis;  White-space: nowrap;              

Effect

But this property only supports a single line of text overflow display ellipsis, if we want to implement multi-line text overflow display ellipsis it.

The next step is to say that multiple lines of text overflow display ellipses, as follows.

Implementation method:

display:  -webkit-box;-webkit-box- orient: vertical; -webkit-line- clamp: 3;overflow: hidden     

Effect

Scope of application:
Due to the use of WebKit CSS extension properties, this method is suitable for WebKit browser and mobile side;

Note:

1. -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. Common binding Properties:
2. Display:-webkit-box; You must combine the properties to display the object as an elastic telescopic box model.
3. -webkit-box-orient must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.

Implementation method:

P{Position:Relative;Line-Height:20px;Max-Height:40px;Overflow:Hidden;}P::After{Content: "...";Position:Absolute;Bottom:0;Right:0;Padding-Left:40px;Background:-Webkit-Linear-Gradient(Left,Transparent,#fff 55%);Background:-O-Linear-Gradient(Right,Transparent,  #fff  55%); : -moz -linear-gradient ( Span class= "PLN" >right, transparent  #fff  55%); : linear-gradient (to right, transparent ,  #fff  55%);                /span>                

Effect

Scope of application:
This method can be used in a wide range of applications, but the text does not exceed the line of the case will also appear ellipsis, combined with JS optimization of the method.

Note:

1. Sets the height to an integer multiple of line-height to prevent the outside text from revealing.
2. Add a gradient background to P::after to prevent text from appearing in half.
3. Because IE6-7 does not display content, it is necessary to add a label compatible with ie6-7 (such as:<span>...<span/>); compatible IE8 needs to be replaced by: after.

CSS control text, out of section display ellipsis