Responsive text truncation with CSS

twitter logo github logo ・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.

twitter logo DISCUSS (5)
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

Classic DEV Post from Jan 30

What are "HTML-CSS-JS" and "CSS-in-JS", anyway?

There's a lot of debate around these frontend strategies! There's not a consensus definition of what they even are. Let's fix that, and add some nuance!

Adrian Bece profile image
React, Frontend, Magento 2 certified developer. Magento PWA Studio contributor. Rock and metal music fan. Reads Dune, sci-fi novels and Calvin & Hobbes. Creates amazing interfaces @ prototyp.digital