[csswg-drafts] [css-overflow] New expand value for overflow. (#7839)

votemike has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow] New expand value for overflow. ==
I would like to propose a CSS way to expand an element that has `overflow: hidden;`.

My initial thought is that a new value for overflow of `expand` could be used in conjunction with either `min-height`, `height` or `max-height` properties.
Alternatively, the entire logic for the expandable element could sit within the overflow property. E.G. `overflow: expand 200px 600px scroll;` for using the expand option, the maximum height of the collapsed element, the maximum height of the expanded element and the overflow option to use if the content will still overflow the element after being expanded.

If an element reaches the point where it will overflow, the browser could add a marker similar to the details/summary marker that will toggle the expanded or collapsed states. This marker could then be styled or targeted by javascript. Elements with overflow could then also be targeted with `:has(::marker)`.

It would be great if the collapsed size could be specified by either a character count or a height. And that there were a range of ways to show that there was more text once expanded (ellipsis, fade, peek-on-hover animation etc....).

Attached in an example of the sort of thing I'd like to be able to create in pure CSS.

<img width="724" alt="Screenshot 2022-10-06 at 12 12 37" src="https://user-images.githubusercontent.com/3957065/194298906-a7e31247-a51d-4ffe-b3ac-ac3d7224dd52.png">


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7839 using your GitHub account


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

Received on Thursday, 6 October 2022 11:21:48 UTC