How to Implement Multi-Line Text Ellipsis with CSS?

Implementing Text Ellipsis on Multiple Lines

While CSS alone can enable text truncation with ellipsis for single-line overflow, achieving the same effect over multiple lines can pose a challenge. The question, "Text overflow ellipsis on two lines [duplicate]," explores this issue.

At first glance, the combination of CSS properties like text-overflow: ellipsis and white-space: nowrap seems sufficient for text truncation. However, white-space: nowrap prevents text from wrapping, leading to truncated text on a single line despite sufficient space for further lines.

To overcome this limitation, consider the following CSS properties:

• display: -webkit-box: Initializes a flexible box layout model, allowing multiple lines of text.
• -webkit-line-clamp: 3: Defines the maximum number of lines the text should occupy (in this case, 3).
• -webkit-box-orient: vertical: Orients the box layout vertically, enabling multi-line text.
• overflow: hidden: Hides any text exceeding the specified lines.
• text-overflow: ellipsis: Adds ellipsis to truncated text.

Using these properties, you can achieve multi-line text ellipsis as follows:

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

This CSS solution effectively allows text to overflow onto multiple lines and be truncated with ellipsis when the specified line limit is reached.

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