Text overflow: ellipsis is usually used to deal with long text and display ellipsis in HTML!

text-overflow : clip | ellipsis

Clip does not display the ellipsis mark "...", but cuts directly
Ellipsis when the text in the object overflows, trim and display the ellipsis mark "..."

Processing method of single line text cutting

The cutting method of single line text is relatively simple, and it is also commonly used in general.

display: block;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Processing method of multi line text cutting

The cutting method of multi line text is a little special. Generally, the height limit method can only be used to cut, but the ellipsis cannot be displayed. Directly setting with CSS properties is only effective for the WebKit kernel

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

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. This is an unsupported WebKit property, which does not appear in the CSS specification draft.

display: -webkit-box displays the object as an elastic box model.

-webkit-box-orient sets or retrieves the arrangement of the child elements of the expansion box object.

text-overflow: ellipsis is used to hide out of range text with ellipsis "..." in case of multi line text.