Re: [csswg-drafts] [css-values-5] [css-overflow-4]How does `line-clamp` transition from `<integer>` to `auto` or `none`? (#10502)

Thinking about this again, I wonder what the use case would be to transition from clamping by a number of lines to clamping by a height.

Usually `line-clamp` indicates hidden content, and transitions based on that would usually expand back to the full size. And that would currently be possible with `line-clamp: auto`, by transitioning a set height to `auto`:

```css
.item {
  transition: height 3s;
  interpolate-size: allow-keywords;
  overflow: hidden;
}
.item.collapsed {
  line-clamp: auto;
  height: 4lh;
}
```

https://github.com/user-attachments/assets/e3525ee2-bce5-4fa3-8ce3-c41da09db292

----

Rather than the lines appearing or disappearing into the hidden overflow, you could also set `line-clamp: auto` on `.item` (so it's enabled on both sides of the transition) to change the number of clamped lines as the height animates. (Note that this could cause jank, since every frame would need a separate layout.) This doesn't seem to work currently in my implementation in Chromium, but it's probably a simple layout caching bug. This is what it'd look like:

```css
.item {
  line-clamp: auto;
  transition: height 3s;
  interpolate-size: allow-keywords;
  /* height: auto is implicit */
}
.item.collapsed {
  height: 4lh;
}
```

https://github.com/user-attachments/assets/9b01fed3-3b26-4eaa-be8e-f943c066a9c5

----

But maybe there are other use cases for transitioning between a number and `auto` that I haven't thought of.

-- 
GitHub Notification of comment by andreubotella
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10502#issuecomment-2428826011 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 22 October 2024 09:54:04 UTC