How to Achieve Multiline Text Overflow with Ellipsis in CSS?

Multiline Text Overflow with Ellipsis

In CSS, the text-overflow property allows truncating text when it exceeds the designated area. However, by default, this truncation occurs on a single line. Sometimes, it is desirable to allow text to wrap on multiple lines while still indicating that there's more to be seen.

Achieving Multiline Overflow with Ellipsis

To achieve this effect, we can utilize the following CSS properties:

• display: -webkit-box;: This property creates a flexible container that can accommodate multiple lines.
• -webkit-line-clamp: 3;: Indicates the maximum number of lines allowed before the ellipsis appears (e.g., set to 3 for a three-line overflow).
• -webkit-box-orient: vertical;: Ensures that lines stack vertically within the container.
• overflow: hidden;: Hides any text that overflows the container's bounds.
• text-overflow: ellipsis;: Adds the ellipsis (...) at the end of the last visible line.

Example Usage

div {
  width: 300px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

With these properties in place, text within the