Andreu Botella May 26

RE: https://toot.cafe/@bkardell/116641112865973368

Web developers, if you have sites using -webkit-line-clamp, please make sure to test them with Chrome with experimental web platform features enabled!

If you can also test the new line-clamp property, that'd also be great!

#CSS #webdev

Show threadAndreu Botella May 26

Brian's blog post goes in more depth on line-clamp, but it gets rid of the 3-property cruft you need before -webkit-line-clamp will do anything, and it also adds a line-clamp: auto syntax to be able to clamp to whatever content fits a given height.

It even lets you animate that height!

Show threadAndreu Botella May 26
And if you're using Chrome Canary, you can also try line-clamp: auto 3, which lets you clamp to a height, or 3 lines, whichever is smaller. Let us know if this would be useful for you!
Show threadMartin AuswögerMay 26
@andreu I noticed that the behavior of `-webkit-line-clamp` changed, because I was using it wrong. But Safari, Chrome and Firefox agreed on the rendering. Chrome with experimental web platform features turned on shows a different result now: https://codepen.io/ausi/pen/gbLGopm
Show threadMartin AuswögerMay 26
@andreu In my real world example I adjusted the height in a media query and forgot to change the line-clamp there too. But the old behavior made no sense, so I think this discrepancy is reasonable.
Show threadAndreu Botella 

@ausi Yeah, the new behavior makes overflow: hidden no longer needed (even for -webkit), by hiding content after the clamp.

This helps fix bugs like the top of the next line being shown through the padding even if you have overflow: hidden: https://codepen.io/andreubotella/pen/JobrMmK

Untitled

...

May 26 at 3:02pmWeb
Show threadMartin AuswögerMay 26

@andreu Yeah, makes total sense. 👍

Having content visible after the clamped line should never be the expected behavior. It was surprising to me that all engines agreed here.