Implementation method of CSS implementation of single-line, multiline text overflow display ellipsis

This article mainly introduces the implementation of the CSS implementation of single-line, multiple lines of text overflow display ellipsis, has a certain reference value, and now share to everyone, the need for friends can refer to

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

One, single-line overflow

1, single-line overflow, out-of-section display ... or intercept. The premises must have a width.
Css:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}, intercept as clip;
Implementation code:

width:300px;    Overflow:hidden;    text-overflow:ellipsis;    Whitewhite-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.

Two, multi-line overflow

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

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; bottombottom:0; rightright:0; padding-left:40px;    Background:-webkit-linear-gradient (left, Transparent, #fff 55%);    Background:-o-linear-gradient (rightright, Transparent, #fff 55%);    Background:-moz-linear-gradient (rightright, Transparent, #fff 55%);    Background:linear-gradient (to Rightright, Transparent, #fff 55%);    }

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. Set height to an integer multiple of line-height to prevent excess 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 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.

The script's small supplement:

IE Core browser must define Line-height and height,-webkit-line-clamp meaning is a few lines, for example

line-height:20px;

max-height:40px;

Display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

Overflow:hidden;

-webkit-line-clamp

-webkit-line-clamp is a non-canonical attribute (unsupported WebKit property) that does not appear in the draft CSS specification.
Limits the number of lines of text displayed in a block element. To achieve this effect, it needs to combine other foreign 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.
Text-overflow, which can be used for multiple lines of text, use the ellipsis "..." to hide out-of-range text.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!