πŸŽ„ Get 50% off from our JavaScript course for the holidays! πŸŽ„
How to Truncate Text With Ellipsis in CSS

How to Truncate Text With Ellipsis in CSS

Ferenc Almasi β€’ 2020 November 19 β€’ πŸ“– 1 min read

There could be times where you don't want your text to span multiple lines but you need to truncate it because of its length. This is where text-overflow: ellipsis is really useful:

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
ellipsis.css
Copied to clipboard!

So why do you also need overflow and white-space? If you don't specify overflow: hidden, the text will overflow its container. white-space on the other hand, prevents the text from being wrapped.

How to cut text with ellipsis in CSS
If you would like to see more Webtips, follow @flowforfrank
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course
10 Best Practices for Quickly Improving Your CSS

Resources:

JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

πŸŽ‰ Thank you for subscribing to our newsletter. x