How to make Ellipsis to multiline text in CSS

Showing 1 or 2 lines of the title looks good on designs like card or excerpt, 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).

Ellipsis to one line text

Applying ellipsis for one like is easy. Requires just 3 line of CSS. Follow the code below.

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

Ellipsis to multiline text

.text-ellipsis--2{
  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;
}

Same way you can apply for 3 or more lines by modifying the -webkit-line-clamp value.

Bootstrap 4

Bootstrap 4 has an inbuilt class for 1 line ellipsis, text-truncate. For multiline text-truncate add a separate style just like the below code.

.text-truncate.text-truncate--2{
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

Hope this article helped you. Thank you.