How to add Ellipsis to multiline text in CSS

How to add Ellipsis to multiline text in CSS? Are you facing the same issue that I was having while working on a project? Ok, if you do have I will solve it in this article today.

Most UI Developers use it to truncate long text lines and this functionality can be easily achieved using CSS

To understand and implement multiline eclipses in CSS we don't need to dive deep into it. This task can be achieved by 3 lines of code.

Showing 1 or 2 lines of the title look good on designs like cards or excerpts, is also important to handle the extra text overflowing in the same line.

UI Developers usually truncate the extra text in the line by applying text-ellipsis, which means showing the 3 dots (visually explains there is even more text, that can be handled by applying the title attribute to the element and showing the full text on hover or the content is available on the next page after clicking that text).

The code that we need to add in our stylesheet to truncate text is provided below.

Ellipsis for One Line in CSS:

Applying CSS ellipsis on one line is very easy. You just need 3 lines of CSS code for this.

.ellipsis{
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

Ellipsis on Multiline Text in CSS:

Ellipsis on multiline text is somehow challenging, but you will be able to do it easily. We need to use the browser prefix for CSS property value and add 3 extra CSS properties in the above code.

.multiline-ellipsis{
  text-overflow:ellipsis;
  overflow:hidden;

  // Addition lines for 2 line or multiline ellipsis
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  white-space: normal;
}

Only Supported in WebKit browsers. I am not sure about other browsers. :)

In the same way, you can apply for 3 or more lines by modifying the -WebKit-line-clamp value.

livedemo