CSS control shows the excess part. It is displayed with the ellipsis and css ellipsis.

CSS control shows the excess part. It is displayed with the ellipsis and css ellipsis.

Often used, but I often forget that I am not writing css, so remember:

Set the restricted width first,

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

How can I display the ellipsis in CSS over two rows?

<Div style = "width: 120px; height: 50px; border: 1px solid blue;
Overflow: hidden; text-overflow: ellipsis ">
<NOBR> for example, a row of text is long and cannot be displayed in a table. </NOBR>
</DIV>

Css enables fixed box width and automatic height. The maximum height is exceeded and the ellipsis is hidden.

White-space: nowrap; indicates that the text will not wrap, and the text will continue on the same line until the <br> label is encountered.
You don't have to wrap the line. What is the purpose of setting the height...

This method is only applicable to the effect of ellipsis when a single line of text overflows.
Multi-Line Text overflow with JS