- From: Florian Rivoal via GitHub <noreply@w3.org>
- Date: Tue, 17 Mar 2026 11:43:11 +0000
- To: public-css-archive@w3.org
Skip to the bottom of this comment if you just want to see my proposal, and not how I got there. The opt-in we're looking for is probably going to be surfaced as an extra keyword on the shorthand, but we need to figure out what the name of that value is, and which longhand it goes into. As a reminder, the current syntax is: ``` block-ellipsis: no-ellipsis | auto | <string> continue: auto | discard | collapse | -webkit-legacy max-lines: none | <integer [1,∞]> ``` with a shorthand of: ``` line-clamp: none | [<integer [1,∞]> || <'block-ellipsis'>] -webkit-legacy? ``` and a legacy shorthand of: ``` -webkit-line-clamp: none | <integer [1,∞]> ``` The only thing that has shipped in production so far is the legacy shorthand, so we can re-jiggle the rest if necessary (and if we do it quick, because this will likely be launching soon). (In the rest of this message, for simplicity, I won't be mentioning the -webkit parts, as we're not changing them.) There's something a little surprising about the current shorthand, which works well from an author point of view, but isn't wired the way most people think (at least in my impression): to get a line-count based clamp, you say `line-clamp: 3`, and to get a height-based clamp, you say `line-clamp: auto`. But the `auto` doesn't actually have anything to do directly with being height based. In fact, it's a value of `block-ellipsis`. What's really happening is that `line-clamp: 3` is short for `line-clamp 3 auto`, and it's the absence of the number, not the presence of `auto` that makes `line-clamp: auto` activate the height based mode. Either way, I don't think it would make sense to stuff the new keyword in block-ellipsis, even if `auto` deceptively appears to be what triggers the height based mode. However, we arguably could rename `block-ellipsis: auto` into something else if we wanted to reuse the `auto` somewhere else. `block-ellipsis: ellipsis` could be an option, especially given that this is the name of the corresponding value in `text-overflow: ellipsis`. This leaves us with two candidates properties to host the new keyword (which may or may not be `auto`): `max-lines` and `continue`. I don't think `max-lines` is a great fit: it's about lines, not about height. Also, clamping at the earlier point is only to be an opt-in for `continue: collapse`. The fragmentation-based mechanics of `continue: discard` have it work out by default. So since this really is a mode of `continue: collapse`, it probably should be a keyword next to `collapse` in the `continue` property. ---- All in all, I'd suggest: * rename `block-ellipsis: auto` to `block-ellipsis: ellipsis` * rename `continue: auto` to `continue: normal` (the `auto` name is a left-over of an earlier design anyway, where `auto` would compute to other values based on various things. See https://www.w3.org/TR/2024/WD-css-overflow-5-20241217/#channelling-overflow) * add `auto` as an optional keyword alongside `collapse` in `continue` (think of it as "auto-height") * if `auto` is set in the shorthand, that sets `continue` to `collapse auto` The complete syntax would then look like (omitting the `-webkit-` parts, which don't change) ``` line-clamp: none | [<integer [1,∞]> || auto || <'block-ellipsis'>] block-ellipsis: no-ellipsis | ellipsis | <string> continue: normal | discard | [collapse && auto?] max-lines: none | <integer [1,∞]> ``` Examples, to see if the syntax makes sense from a user's point of view, and what it expands to: <table> <thead><tr><th>shorthand<th>longhand expansion<th>line-based clamping<th>height-based clamping<th>ellipsis <tbody> <tr><td><pre>line-clamp: 3</pre><td rowspan=2><pre>continue: collapse;<br>block-ellipsis: ellipsis;<br>max-lines: 3;</pre><td rowspan=2>✅<td rowspan=2>❌<td rowspan=2>… <tr><td><pre>line-clamp: 3 ellipsis</pre> <tr><td><pre>line-clamp: auto</pre><td rowspan=3><pre>continue: collapse auto;<br>block-ellipsis: ellipsis;<br>max-lines: none;</pre><td rowspan=3>❌<td rowspan=3>✅<td rowspan=3>… <tr><td><pre>line-clamp: ellipsis</pre> <tr><td><pre>line-clamp: auto ellipsis</pre> <tr><td><pre>line-clamp: 3 auto</pre><td rowspan=2><pre>continue: collapse auto;<br>block-ellipsis: ellipsis;<br>max-lines: 3;</pre><td rowspan=2>✅<td rowspan=2>✅<td rowspan=2>… <tr><td><pre>line-clamp: 3 auto ellipsis</pre> <tr><td><pre>line-clamp: "(continued)"</pre><td rowspan=2><pre>continue: collapse auto;<br>block-ellipsis: "(continued)";<br>max-lines: none;</pre><td rowspan=2>❌<td rowspan=2>✅<td rowspan=2>(continued) <tr><td><pre>line-clamp: auto "(continued)"</pre> <tr><td><pre>line-clamp: 3 "(continued)"</pre><td ><pre>continue: collapse;<br>block-ellipsis: "(continued)";<br>max-lines: 3;</pre><td>✅<td>❌<td>(continued) <tr><td><pre>line-clamp: no-ellipsis</pre><td><pre>continue: collapse auto;<br>block-ellipsis: no-ellipsis;<br>max-lines: none;</pre><td>❌<td>✅<td> <tr><td><pre>line-clamp: 3 no-ellipsis</pre><td><pre>continue: collapse;<br>block-ellipsis: no-ellipsis;<br>max-lines: 3;</pre><td>✅<td>❌<td> </table> And so on. I think this works alright, so I suggest we do that. -- GitHub Notification of comment by frivoal Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13670#issuecomment-4074361390 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 17 March 2026 11:43:12 UTC