no-style

close

How to add Ellipsis to multiline text in CSS

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 of the UI Developers use 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 looks good on designs like cards or excerpts, 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 title attribute to the element and show the full text on hover or the content is available on the next page after clicking that text).

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

Ellipsis for One Line in CSS:

Apply 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 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.

Canclusion:

That's it! Follow this blog for more tips and tricks related to web design and development especially related to the blogger.

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

no-style

no-style

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}