DEV Community

Discussion on: Line-Based Truncation Methods

Collapse
 
carlymho profile image
Carly Ho 🌈

Yeah, text-overflow: ellipsis is a great solution if you only need one line, but unfortunately it doesn’t work for vertical overflow. (If they ever implement that, i’ll be delighted!)

The reason why I use a large max-height number here is that I often use the CSS solution in the case where there’s an β€œexpand” button that the user can click to see the full content, and I’m usually asked to have it slide down with an animation. CSS transitions work on max-height and max-width if you’re transitioning between two numbers, but not from a number to the none value. If you’re not having to deal with animated transitions, though, max-height: none totally works!