Text overflow display ellipsis

One, single-line text overflow display ellipsis (... ) )

Set the width and height of the block elements, and then use three properties (integral) to control

Overflow:hidden;

Text-overflow:ellipsis;

White-space:nowrap;

The Demo is as follows:

The effect is as follows:

Two, multi-line text overflow display ellipsis (... )

You can use the following four properties to control:

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.

The demo is as follows:

Effects such as:

However, in terms of compatibility, this method controls multiple lines of text overflow display ellipsis, only compatible with WebKit Browser, other browsers do not display ellipses.

Text overflow display ellipsis