How to realize the ellipsis effect of single-line and multi-line text beyond display by css
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!
