How to set css to exceed the display ellipsis
This article mainly introduces how to set css beyond the display ellipsis, the article introduces in great detail, has a certain reference value, interested friends must read it!
Css setting exceeds the method of showing ellipsis: 1, use the "overflow:hidden;" statement to hide the excess part; 2, use the "text-overflow:ellipsis;" statement to show the ellipsis symbol to represent the hidden part when the text overflows the containing element.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
There are two situations in which the css setting exceeds the display ellipsis
A single line of text overflows to show ellipses.
Multiline text overflows to show ellipses.
But the core code is the same: you need to use "overflow:hidden;" to hide the excess, and then use "text-overflow:ellipsis;" to display as an ellipsis when the text exceeds.
Overflow:hidden; does not display content that exceeds the size of the object, just hides the excess
Text-overflow:ellipsis; is displayed when the text object overflows. Of course, you can also set the property to clip to not display dots.
Implementation code
1. Single-line text overflow shows ellipsis.
* {margin: 0pxashing padding: 0px.box {width: 300pxashing height: 500pxashing margin: 50px auto;} .boxes {width:220px; overflow:hidden; white-space: nowrap Text-overflow:ellipsis;-oMutttext overflow flows
Css single-line text shows ellipsis beyond its length
Css single-line text shows ellipsis beyond its length
Effect picture:
2. Multi-line text overflow shows ellipsis.
* {margin: 0pxashing padding;} .box {width: 280px; height: 62px; margin: 50px auto; overflow: hidden; text-overflow: ellipsis Display:-webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical } css multi-line text shows ellipsis over length, and css multi-line text shows ellipsis over length.
The above is all the content of the article "how to set css beyond the display ellipsis". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
