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.
Add comment