Home > Web Front-end > CSS Tutorial > How to Implement Multi-Line Text Ellipsis with CSS?

How to Implement Multi-Line Text Ellipsis with CSS?

Linda Hamilton
Release: 2024-12-05 07:17:13
Original
495 people have browsed it

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;
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template