CSS - ellipsis display for text overflow

Ellipsis for single-line text overflow -- 3 conditions must be met

1. First force the text to be displayed in one line

   white-space: nowrap;/*The default is normal automatic line wrapping*/
   

2. Hide the excess

   overflow: hidden;
   

3. Text is replaced with ellipsis beyond the part

   text-overflow: ellipsis;
   

Ellipsis for multiline text overflow

Multi-line text overflow shows ellipsis, suitable for webKit browsers

overflow: hidden; 
text-overflow: ellipsis; 
/* elastic box model display */ 
display: -webkit-box; 
/* limit the number of text lines displayed in a block element */ 
-webkit-line-clamp: 2; 
/ * Set or retrieve the child element arrangement of the flex box object*/ 
-webkit-box-orient: vertical;

In fact, the output of the ellipsis can also be controlled by the backend, so that the frontend only needs to control the number of displayed words.