Cover image for Responsive text truncation with CSS

Responsive text truncation with CSS

adrianbdesigns profile image Adrian Bece ・1 min read

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.


markdown guide

Woo! Saved for future reference! Thank you! 🙌


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


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.


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.


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