Hello Sunil
css-ellipsis-single-multiple-lines-feature-image

CSS Ellipsis (the 3 dots…) on Single OR Multiple Lines

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 line is easy. Requires just few lines of CSS.

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

đź“Ł Information

The parent container often allows its contents to overflow, making the ellipsis not show up. Add overflow: hidden; to the parent container to fix that.

Example:

See the Pen Ellipsis to One Line Text by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Ellipsis to Multiline Text

You will soon find, that text-overflow: ellipsis; doesn’t work when the text wraps to an extra line.

To truncate multi-line text and add an ellipsis at the end of the last line use the experimental -webkit-box box model (don’t worry it’s supported in all major browsers):

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

Control how many lines to show with -webkit-line-clamp. It is important to let the text wrap by setting the white-space property to pre-wrap or normal.

đź“Ł Information

Same as before, the parent container needs to clip its children. Add overflow: hidden; to the parent element.

Example:

See the Pen Ellipsis to Multiline Text by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

How to add ellipsis in Bootstrap?

Bootstrap 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-ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
}

Conclusion

It’s trivial to truncate the overflowing text and add an ellipsis at the end of a single line. Adding an ellipsis for multiline text is a bit more tricky, so this post should help you.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.