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)
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