Replace the content exceeding the text truncation with the ellipsis

Today I made an example of a module.

The title and description of the two parts must be truncated by a line or two lines of text beyond a certain width, and replaced by a ellipsis.

Because it is a mobile phone page, JS is too overhead, you can only start with CSS.

A row is a good solution.

As shown in the following figure.

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

I 've been thinking about multiple lines for a long time. For example, if I write a fixed line high and it exceeds the hidden limit, I can get a ellipsis as a patch at the end. But there is a problem, the page width is not fixed, it may only cover half of the word, it looks very low.

Continue searching for information, cssv5!

-The WebKit-line-clamp attribute can control the number of lines of captured text.

Overflow: hidden; text-overflow: ellipsis; display:-WebKit-box;-WebKit-line-clamp: 2;-WebKit-box-Orient: vertical;