DEV Community

Cover image for Responsive text truncation with CSS
Adrian Bece
Adrian Bece

Posted on

Responsive text truncation with CSS

This is a simple codepen example of responsive text truncation using CSS. We can achieve this using either Flexbox (for modern browsers) or Tables (supports also legacy browsers).

As a bonus, I am also including a responsive multi-line text truncation example.

Top comments (5)

Collapse
 
nerdy_girl profile image
Natalia

Woo! Saved for future reference! Thank you! 🙌

Collapse
 
adrianbdesigns profile image
Adrian Bece

You're welcome. Kinda wrote this post for the same reason :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

This article would have come handy the other day when we had a similar issue at work. Unfortunately, they also wanted to support multi line in IE, so we ended up needing JS.

Collapse
 
adrianbdesigns profile image
Adrian Bece

I totally understand that. I usually went with max-height and hidden overflow on IE for multi-line text because the project I worked on was super-bloated with JS (due to the framework being JS-heavy) and didn't want to add more just for IE.

Collapse
 
naneziris profile image
Nikos Aneziris

Unfortunately the support on line-clamp isn't great. It is supported on modern versions so I believe sometime in the future we could mark it as safe to use.
This goes for the multiline solution