How to set css to display ellipses beyond a few lines
This article mainly introduces how to set css to display ellipses beyond a few lines, the article is very detailed, has a certain reference value, interested friends must read it!
The css setting displays ellipses beyond a few lines:
1. Single-line text
Use the text-overflow:ellipsis property
Text-overflow: clip | ellipsis | string
Clip: trims the text.
Ellipsis: displays ellipsis symbols to represent the trimmed text.
String: use the given string to represent the trimmed text.
Example:
Css:
P {
Overflow: hide the excess part of hidden;/* * /
The excess part of text-overflow:ellipsis;/* shows the ellipsis * /
White-space: nowrap;/* stipulates that text in a paragraph does not wrap * /
Width: 250pxram * need to match the width * /
Border: 1px solid red
Font-size: 30px
}
Html:
The excess of a single line of text shows an ellipsis. I'm mdzz.
2. Multi-line text displays the ellipsis, which is at the end of the paragraph.
P {
Display:-webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 3
Overflow: hidden
Width: 250px
Border: 1px solid red
Font-size: 30px
}
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.
The above is all the content of the article "how to set css to display ellipses beyond a few lines". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
