Shulou(Shulou.com)06/02 Report--

This article introduces you what is the hidden method of css3 overflow, the content is very detailed, interested friends can refer to, hope to be helpful to you.

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

Implementation method:

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

However, this property only supports the overflow display ellipsis of single-line text, if we want to implement multi-line text overflow display ellipsis.

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

Implementation method:

Display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3witch: hidden

Scope of application:

Due to the use of WebKit's CSS extension attribute, this method is suitable for WebKit browsers and mobile devices.

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 associative attributes:

Display:-webkit-box; must combine properties to display the object as a flexible box model.

-webkit-box-orient must combine properties to set or retrieve the arrangement of the child elements of the telescopic box object.

Implementation method:

P {position: relative; line-height: 20px; max-height: 40px: 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%);}

Scope of application:

This method has a wide range of application, but the ellipsis will also appear when the text does not exceed the travel, so the method can be optimized with js.

Note:

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

Add a gradient background to the p::after to avoid displaying only half of the text.

Since ie6-7 does not display content content, add tags that are compatible with ie6-7 (e.g. Compatible with ie8, you need to replace:: after with: after.

On the css3 overflow hiding method is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.