CSS implementation method to realize single-line and multi-line text overflow and display ellipses

不言
Release: 2018-06-05 16:21:52
Original
1755 people have browsed it

If you want to realize the overflow display of ellipses in a single line of text, you should all know to use the text-overflow:ellipsis attribute. Of course, you also need to add the width attribute to be compatible with partial browsing.

1. Single line overflow

1, a single line overflows, the excess part is displayed...or intercepted. The premise must have width.
CSS: {width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}, intercepted as clip;

Implementation code:

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;
Copy after login

The effect is as shown in the figure:


But this attribute only supports the overflow display of ellipsis in a single line of text. What if we want to implement the overflow display of ellipsis in multi-line text.

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

2. 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;
Copy after login

The effect is as shown in the figure :


Scope of application:

Due to the use of WebKit’s CSS extended attributes, this method is suitable for WebKit browsers and mobile terminals;

Note:

1.-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other WebKit properties. Commonly combined attributes:
2.display: -webkit-box; must be combined to display the object as a flexible 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; 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%);    
}
Copy after login

Applicable scope:
The The 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 with js.

Note:

1. Set height to an integer multiple 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 tags to be compatible with ie6-7 (such as: ...); to be compatible with ie8, you need to replace ::after with :after.

Script House editor added:

ie core browser must define line-height and height, -webkit-line-clamp means 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 an unsupported WebKit property that does not appear in the CSS draft specification.

Limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other foreign WebKit properties. Commonly combined properties:
display: -webkit-box; must be combined to display the object as a flexible box model.
-webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.
text-overflow can be used to hide out-of-range text with the ellipsis "..." in the case of multi-line text.

The above is the detailed content of CSS implementation method to realize single-line and multi-line text overflow and display ellipses. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!