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:
- -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:
- Display:-webkit-box; You must combine the properties to display the object as an elastic telescopic box model.
- -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%); background:-moz-linear-gradient (right, transparent, #fff 55%); background: Linear-gradient (to right, transparent, #fff 55%);}
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:
- Sets the height to an integer multiple of line-height to prevent the outside text from revealing.
- Add a gradient background to P::after to prevent text from appearing in half.
- 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 implementation single-line, multiline text overflow display ellipsis (... )