[csswg-drafts] [css-overflow-4] line-clamp "max-lines" - support auto value to fit container (#9368)

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

== [css-overflow-4] line-clamp "max-lines" - support auto value to fit container  ==
#### Spec links
- https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp
- https://drafts.csswg.org/css-overflow-4/#propdef-line-clamp

Currently a `-webkit-line-clamp` only supports an integer number which represents the maximum 
number of lines to possibly render before truncating the text with an ellipsis.

I have a use-case where I need an dynamic value for the `-webkit-line-clamp` so it matches the 
number of lines which can fit in the container (which is being truncated), assuming the container 
has a dynamic height.

### Example:

https://jsbin.com/kovuwow/edit?html,css,output

```html

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
  voluptate velit esse cillum dolore eu fugiat nulla
</div>
```

```css
div {
  display: -webkit-box;
  -webkit-line-clamp: auto; /* 👈 keyword to let line-clamp according to the container */
  -webkit-box-orient: vertical;
  overflow: hidden;
  resize: auto;
}
```

If you want `line-clamp` to (show N lines that can) fit the container element, it is currently impossible:
https://github.com/w3c/csswg-drafts/assets/845031/72b47c23-f015-4883-bba4-8ed02db2900d



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


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

Received on Sunday, 17 September 2023 13:29:10 UTC