Add ellipses to overflowing text and truncate the text using CSS

Milind Soorya / July 22, 2021

1 min read

If you don't want text to wrap and occupy multiple lines, you can easily add ellipses to overflowing text and truncate the text into a single line. this is how to do it.

Add the following to the div containing the text.

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

Learn about building products as a Data Scientist

Get a once-per-month email with my latest article and additional details about my launches, products, and experiments ✨

No spam, sales, or ads. Unsubscribe as your heart desires.