Home  >  Article  >  Web Front-end  >  How to implement overflow hiding in css

How to implement overflow hiding in css

藏色散人
藏色散人Original
2021-04-08 09:59:5428482browse

How to implement overflow hiding in css: 1. Add the "overflow: hidden;" style to the element and set it to trim and hide the overflow part when the content overflows the element box; 2. Add "text-overflow" to the element :ellipsis;" style, the trimmed content (hidden content) can be represented by the ellipsis symbol "...".

How to implement overflow hiding in css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

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 some browsing.

Implementation method:

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

The effect is as shown:
How to implement overflow hiding in css

But this attribute only supports the overflow display of ellipsis for a single line of text, if we want to implement multiple lines The text overflows and displays ellipses.

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:
How to implement overflow hiding in css

Applicable scope:
Due to the use of WebKit’s CSS extended attributes, this method is applicable In WebKit browsers and mobile terminals;

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

  • display: -webkit-box; Attributes that 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.

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:
How to implement overflow hiding in css

##Applicable scope:

This method has a wide range of application, However, ellipses will also appear when the text does not exceed the line. This method can be optimized with js. [Recommended learning:
css video tutorial]

Note:

  • Set height to an integer multiple of line-height to prevent excess text from being exposed .

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

  • 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 add: :after is replaced with :after.

The above is the detailed content of How to implement overflow hiding in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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