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