CSS method to solve the problem that the number of text words exceeds the display of ellipsis... (single line, multi-line text)

If you want to realize the overflow display of ellipsis in a single line of text, you should all know to use text-overflow:ellipsisattribute, and of course you need to increase the widthwidth is compatible with partial browsing.

Implementation method:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

The effect is as shown:

But this attribute only supports the overflow display of ellipsis for a single line of text. If we want to implement the overflow display of multi-line text What about the ellipsis?

Next, let’s focus on the multi-line text overflow display ellipses, as follows.

Implementation method:

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

The effect is as shown:

Scope of application:
Due to the use of WebKit’s CSS extended attributes, this method is suitable for WebKit browsing Server and mobile terminal;

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 be combined with other WebKit properties. Commonly combined attributes:

2.display: -webkit-box; Attributes that must be combined, object will be displayed as an elastic scaling box model.

3.-webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex 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%);}

The effect is as shown in the figure:
Applicable scope:
This method has a wide range of applications, but ellipses will also appear when the text does not exceed the line. ,This method can be optimized in combination with js.

Note:

1. Set height to integer times of line-height to prevent excess text from being exposed.

2. Add a gradient background to p::after to prevent only half of the text from being displayed.

3. Since ie6-7 does not display content content, you need to add a tag to be compatible with ie6-7 (such as: ...); to be compatible with ie8, you need to replace ::after with :after.

【Related Recommendations】

1. How to use ellipses to control the number of characters displayed in html text

2. Use css to solve the problem of title display Ways to exceed the word count

3. Online css free video tutorial

The above is the detailed content of CSS method to solve the problem that the number of text words exceeds the display of ellipsis... (single line, multi-line text). For more information, please follow other related articles on the PHP Chinese website!