Text omission problem: single line, multiline, special case in flexbox

The article is very simple, just go straight to the dry goods!

1. If you want to omit a single line of text, just copy the class name below

   1、单行文字，文字省略
   .ellipsis-1 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
   }

2. If you need to omit after multi-line display, copy the following code (change this 2 to what you want)

   .ellipsis-2 {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }

3. Special case: the text is inside a flex box, and overflow: hidden will be invalid. At this time, two attributes need to be added to the parent box:

   div {
       flex:1;
       witdh:0;
   }

   flex: It is used to control the width of the box, and width is used to limit the text without stretching the elastic box!

   ---

It is full of dry goods, if it is useful to you, give it a thumbs up!