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 Aug 4

You're not worth hiring unless...

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

Customize DEV by logging in

  • Follow users
  • Follow tags
  • Dark mode
  • Font style (like sans serif)
  • Notifications
Get Started