How to make Ellipsis to multiline text in CSS

/ December 30, 2020 / CSS, Front-End
how to ellipsis on multiline text 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.


Related Post

How to close Bootstrap open collapse navbar clicking outside of navbar elements [Best method]
You might be trying to relocate the navbar to the right or left side of the layout. For left and…

Bootstrap, CSS / January 31, 2021

How to stick footer to bottom of page if not enough content
Keeping header at top and footer at bottom is a common practice for almost all websites. Sometimes, if content is…

Front-End / December 31, 2020

Categories

Kiran Acharya

Kiran Acharya

Front-End Developer

Bengaluru, Karnataka, India