Re: [csswg-drafts] [css-overflow] Can you line-clamp by both a number of lines and a height at the same time? (#12041)

Here's the text from the slides I presented in the discussion:

<details>

- When `(-webkit-)line-clamp` was initially spec’d, it was defined in terms of fragmentation (`continue: discard`)
- The line-clamp container created a fragmentation context, and any fragments other than the first one were discarded
- `line-clamp: 5` created a forced break after the fifth line

---

(Interactive demo, which you can find at https://codepen.io/andreubotella/pen/empbjjM)

(The demo shows a fragmentation container, where the first fragment would be shown, and the rest are grayed out, representing fragments that would be discarded. The content has a forced break after the fifth column. You can resize the height of the container, and when the fifth line will not fit in that height, it will be pushed to the following fragment, which will be discarded. Therefore, clamping by lines and height falls directly out fragmentation in `continue: discard`.)

---

- Now `line-clamp` uses `continue: collapse`, which hides the content after clamp
- When I was initially prototyping `continue: collapse`, I understood the goals to be clamping by lines, and by height, but not both at the same time
  - I also initially took clamping by both out of the initial prototype because I expected it might be harder to implement
- Eventually this understanding made its way into the current implementation in Chromium, and into the spec text
- In the April F2F, Florian and Elika were surprised that this behavior was not in the spec

---

**Proposal: `line-clamp: <integer>` with a height constraint clamps by height or by lines, depending on what comes earlier**

---

**Possible web compat issues**

- We accidentally shipped this behavior by default for `-webkit-line-clamp` (without experimental web platform features) in Chromium 140 Canary.
- This was reported as a regression. In the issue, two developers said this would break their sites.
- We reverted this change before Chrome 140 shipped, and will add use counters for uses of `-webkit-line-clamp` with height constraints in Chrome 141
  - We’ll have useful data in December
- https://issues.chromium.org/issues/436345865#comment23
</details>

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


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

Received on Thursday, 4 September 2025 07:12:51 UTC