css settings display with ellipsis (...) when the number of characters exceeds the limit

1. If the text exceeds one line, omit the excess part and display '...'

Use the text-overflow: ellipsis attribute, of course, you also need to increase the width attribute to be compatible with partial browsing.

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2. Multi-line text overflows and displays ellipsis

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

Note:

① -webkit-line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other WebKit properties. Common combination properties:
② display: -webkit-box; The properties that must be combined, display the object as a flexible box model.
③ -webkit-box-orient The property that must be combined to set or retrieve the arrangement of the sub-elements of the flex box object