css text removal and ellipsis position

text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
clip attribute value: Text characters are directly truncated at a certain width point.

ellipsis attribute value: Literally, we know that the critical point ends with an ellipsis.

String attribute value: It means that the overflow display string can be customized, and the Firefox browser can render its effect temporarily, and it should still be in the experimental stage.

The three values ​​are all within a certain width. If the width is not enough to display, the attribute value of text-overflow will also be truncated.

 .list-item-name {
    width: 80px; 
    text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
    overflow: hidden;  
    white-space: nowrap;
  }

The default value of direction is 'ltr', therefore, the above-mentioned undefined order is also from left to right.
Here we want to change the ellipsis to the front of the paragraph, we just need to spell direction: 'rtl'.

 .list-item-name {
    width: 80px; 
    text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
    overflow: hidden;  
    white-space: nowrap;
     direction: rtl;//省略方向：ltr:省略号在右侧，rtl：省略号在左侧； 
  }

-webkit-line-clamp: 3; / Limit the number of lines of text, only display 3 lines /
-webkit-box-orient: vertical;/*Set or retrieve the arrangement of the child elements of the flex box object*/
white-space: nowrap; // text does not wrap