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

Editor to share with you how css to achieve single-line, multi-line text beyond the display of ellipsis effect, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

. ellipsis-line {

Border:1pxsolid#f70505

Padding:8px

Width:400px

Overflow:hidden

Text-overflow:ellipsis;// text overflow shows ellipsis

White-space:nowrap;// text does not wrap

}

Syntax:

Text-overflow:clip/ellipsis

Default value: clip

For: all elements

Clip: does not show ellipsis marks (… Instead, cut out the part of the overflow

Ellipsis: displays the ellipsis mark (…) when text overflows within an object. ).

In use, sometimes found that there will not be omitted mark effect, after testing found that the use of ellipsis, must be combined with overflow:hidden;white-space:nowrap;width: specific value; the three styles used together will have an effect.

Multi-line text ellipsis

Set directly with the css property-webkit-line-clamp:n;

The page implementation on WebKit browsers or mobile browsers (mostly WebKit kernel browsers) is relatively simple, and you can directly use WebKit's CSS extension attribute (WebKit is a private attribute)-webkit-line-cl Note: this is a non-standard attribute (unsupportedWebKitproperty), which does not appear in the draft CSS specification.

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

Text-overflow:ellipsis;, can be used in the case of multiple lines of text, with an ellipsis "…" Hide text that is out of range.

This property is only suitable for WebKit browsers or mobile (mostly WebKit kernel) browsers

. multi-line {

Border:1pxsolid#f70505

Width:400px

Overflow:hidden

Text-overflow:ellipsis

Display:-webkit-box

-webkit-line-clamp:3

-webkit-box-orient:vertical

}

The above is all the content of the article "how to achieve single-line and multi-line text beyond the display ellipsis effect in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.