How Can I Create a Multi-Line Text Overflow Ellipsis with CSS?

Text Overflow Ellipsis on Multiple Lines

While CSS rules can effectively truncate text with ellipsis when it exceeds specified boundaries, achieving this same effect on multiple lines can be challenging. However, using a combination of CSS properties makes it possible.

To achieve an ellipsis on multiple lines, the following approach can be employed:

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

Here's how these properties work:

• display: -webkit-box: Sets the element as a flexible box model.
• -webkit-line-clamp: 3: Specifies the maximum number of lines that the text should occupy before being truncated. In this case, it's set to 3 lines.
• -webkit-box-orient: vertical: Orients the box vertically, allowing the text to wrap on multiple lines.
• overflow: hidden: Ensures that any excess content outside the specified lines is not displayed.
• text-overflow: ellipsis: Triggers the ellipsis when the text overflows the designated lines.

Using these properties, text can be elegantly truncated on multiple lines, providing a clear and concise display.

The above is the detailed content of How Can I Create a Multi-Line Text Overflow Ellipsis with CSS?. For more information, please follow other related articles on the PHP Chinese website!