Single line and multi-line text overflow are expressed with ellipsis, and multiple lines overflow with ellipsis

Single line and multi-line text overflow are expressed with ellipsis, and multiple lines overflow with ellipsis

Hiding and displaying ellipsis after a single line or multiple lines of text overflows

Recently, I encountered a problem about text overflow hiding and displaying ellipsis.

I have benefited a lot from searching documents and reading some blog posts. I would like to record that:

1. Single Line Text overflow and hiding:

When the text length exceeds the width of a line, the overflow text will be automatically hidden and the last display '... 'Prompt the user.

Implementation Method:

Pure css style:

P {
Text-overflow: ellipsis; // required
White-space: nowrap; // required
Overflow: hidden; // required
}

The three css attributes set for the p tag above are mandatory and indispensable:

Text-overflow: defines how to handle text overflow. There are two valid values:

Clip: When the inline content overflows the block container, the overflow part is cut out.
Ellipsis: When the inline content overflows the block container, replace the overflow part (...).
2. Multi-Line Text overflow and hiding:
There are two lines of text. When the second line of text overflows, the text exceeds the limit and '... '

Different from a single line of text, the preceding text-overflow attribute cannot be used here. Here, the webkit kernel browser is used, so it can be used on mobile terminals. Code:

P {
Overflow: hidden; // required
Display:-webkit-box; // required
-Webkit-line-clamp: 2; // required
-Webkit-box-orient: vertical; // required
}
In the above Code:

-Webkit-line-clamp: sets the maximum number of lines displayed in the text.
-Webkit-box-orient: If this parameter is not set, the ellipsis (…) is not displayed (...).