A news title in a news list that is frequently encountered during development is too long. In this case, you can add a set of CSS rules to it to hide the characters that exceed the box and display the ellipsis at the end.
Style:
< ="/">. {:;:;:;:;:;:;}</>
Explanation:
White-spaceHow to process the blank space in an element in attribute settings
White-space: nowrap; indicates that the text will not wrap, and the text will continue on the same line until the <br> label is encountered.
Overflow: hidden;Hide the excess part.
Text-overflowAttribute specifies what happens when a text overflow contains elements.
|
|
Clip |
Trim text |
Ellipsis [ɪ ˈ l ɪ ps ɪ s] |
Show omitted characters to represent the trimmed text |
String |
Use the given string to represent the trimmed text |
It is better to show the effect of the text including the hidden part by adding the mouse over the text. The Code is as follows:
.:{:;}
Shows the effect: