1. Display a single line
p{
width: 100px;/*set the width yourself*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* A single line of text exceeds the hidden display ellipsis */
/*This method will interrupt the word, for example, the last word is interesting and it will be displayed as inter...*/
Second, display multiple lines
p{
width: 100px;/*set the width yourself*/
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;/*The number is the number of lines you want to display. When set to 1, it becomes a single line*/
-webkit-box-orient: vertical;
}
/* This method will not break the words of the first few lines, but will break the last word of the last line */
3. Break words and allow long word wrapping styles
word-break:break-all;/*break word*/ word-wrap:break-word;/*Allow long words to wrap*/
Interrupting words doesn't need to explain too much,
Mainly talk about allowing long words to wrap: if you write long words after the width is fixed, and the remaining width is too narrow to fit, the long words will wrap, and if it is still not displayed, it will be interrupted (that is, a word is larger than the one you set. wider width).
.