DEV Community

Discussion on: Line Clampin'(Truncating Multiline Text) - the smarter way

Collapse
 
ekeijl profile image
Edwin

You would expect that CSS would have a solution for this by now. πŸ˜…
If you want pure CSS, I would use a linear gradient overlay as such:

The advantage here is that all the content is still there and you only need to apply a single CSS class.

You should totally add a live example of your code btw!

Collapse
 
emilcheva profile image
Evgenia Milcheva • Edited

Good try (I like the effort you spent to make it CSS only) but has some cons to me.

  1. You won't be able to add ellipsis this way (this kind of changes the look I'm after)
  2. Increasing the line-height practically changes the number of lines to be shown (not in my case though as line-height is part of the mixin calc)

P.S. Accepting your remark and will add a codepen demonstrating my approach. Thank you!