CSS style: single-line/multi-line text overflow hiding, ellipsis instead

Single-line text overflow hiding:

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

Note: overflow: hidden; itself acts on block-level elements. If the element wrapping the text is an inline element, then overflow will not take effect, because the inline element is supported by child elements, and it has no ability to cut the element. So add display: block to convert the inline elements into block-level elements.

display: block; /* 如果是行内元素要转换成块级元素 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Multi-line text overflow hiding

display: -webkit-box;
-webkit-box-orient: vertical; /* 设置对齐模式 */
-webkit-line-clamp: 3; /* 设置显示行数 */
overflow: hidden;
text-overflow: ellipsis;

Multi-line text needs to take advantage of the unique attributes of the webkit kernel.
Set the alignment mode: more mode reference -> rookie tutorial