How to Truncate Text With Ellipsis in CSS

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;
}

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.

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Documentation for text-overflow
• Documentation for overflow
• Documentation for white-space