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

Editor to share with you what are the ways to use css to achieve text overflow ellipsis, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. One-line realization of text ellipsis

/ * the set width to be displayed here * /

Overflow:hidden

White-space:nowrap

/ * ellipsis ellipsis is displayed if the text exceeds the width * /

Text-overflow:ellipsis

Width:100%

2345 Screenshot 20181015145014.png

two。 Which line realizes the ellipsis of the text

Display:-webkit-box

-webkit-box-orient:vertical;/* setting direction * /

-the webkit-line-clamp:2;/* setting exceeds the number of lines with ellipses * /

Overflow:hidden

When using the webpack packaging tool, you will ignore this-webkit-box-orient attribute, which can be changed here to the following

Display:-webkit-box

Overflow:hidden

/ * autoprefixer:off*/

-webkit-box-orient:vertical

/ * autoprefixer:on*/

-webkit-line-clamp:8

Text-overflow:ellipsis

3. Using js to achieve word count followed by ellipsis

If (title.length > 26) {

Title=title.substring (0JM 27) + "..."

}

4. Line wrapping word-break and word-wrap

White-space:normal (automatic line wrapping), when the written text exceeds the defined width, it will automatically wrap the line, but when the written data is a pile of characters or letters or numbers without spaces, the container will be enlarged when it exceeds the width of the container.

At this time, you can use: word-break:break-all;word-wrap:break-word to solve

When word-break:break-all exceeds the width of the container, if a word is very long, it will be truncated and written separately.

When word-wrap:break-word exceeds the width of the container, if a word is very long, it will put the word on the next line without truncating it.

Word-break:normal | break-all | keep-all

Normal: allows line wrapping within words

Break-all: allows line breaks within words

Keep-all: you can only wrap at half-width spaces or hyphens.

Word-wrap:normal | break-word

Normal: allows content to top open specified container boundaries

Break-word: the content will wrap within the boundary. If necessary, word-break can also occur

The above is all the contents of this article entitled "what are the ways to use css to achieve text overflow ellipsis?" 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.