What are the methods of using css to realize text overflow ellipsis
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!
