CSS implementation single-line, multiline text overflow display ellipsis

1. Single line out of display ...

<p> text text text text text text text text text text text literal text </p>p{    width:200px;    Overflow:hidden;    Text-overflow:ellipsis;    White-space:nowrap;}

Effect:

2. Multiple lines out of display ...

<p> text text, text text, text, text, text, text </p>p {width:100px; /*Limit width*/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 -%); Background:-o-linear-gradient (right, Transparent, #fff -%); Background:-moz-linear-gradient (right, Transparent, #fff -%); Background:linear-gradient (to right, transparent, #fff -%);}

Effect:

Under IE9 effect:

Note:

1. If the text does not exceed the line of the case will also appear the ellipsis, need to cooperate with JS for optimization (post-Update method)

2. Because ie6-7 does not display content contents, it is necessary to add a label compatible with ie6-7 (such as:<span>...<span/>); compatible IE8 need to replace: After replaced by: after.

CSS implementation single-line, multiline text overflow display ellipsis