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

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!

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.