Re: [csswg-drafts] [css-overflow] `text-wrap-style` interaction with height-based `line-clamp` (#10827)

> 1. First you do layout normally.
> 2. Then, regardless of whether it's based on a line count or a height, you pick your clamp point.
>     (if the content is short enough that there's no clamp, stop here)
> 3. Then you insert your ellipsis in the last line.
> 4. then if `text-wrap-style` is `balance`, you re-run balancing on the lines before the clamp point, with the added constraint (if your original algo didn't have that) that it cannot change the number of lines nor grow the height.

I'm looking at this again, and I think that at least for `text-wrap: balance` this might lead to lines being too short before the clamp point.

Consider the test case at https://wpt.live/css/css-text/white-space/text-wrap-balance-005.html:

```css
div {
  font-family: monospace;
  width: 8ch;
  line-clamp: 2;
  text-wrap-style: balance;
}
```
```html
<div>1 2 3 4 5 6 7 8 9</div>
```

Currently all browsers render this as

```
+--------+
|1 2 3 4 |
|5 6 7 8…|
+--------+
```

which looks reasonably balanced. However, if we follow this algorithm, the balancing in step 1 would include the third line (which without balancing only contains "9"), resulting in:

```
+--------+
|1 2 3   |
|4 5 6…  |
+--------+
```

I'd say that for `text-wrap: balance`, clamping by a number of lines should first clamp and place the ellipsis, and then balance. The equivalent when clamping by a height could be trickier to implement, but I think it's still feasible. For `text-wrap: pretty` it might make sense to take into account the whole paragraph, including any content after clamp, but you should know that Chromium's implementation currently also ignores lines after clamp just like for balance.

I'm also wondering whether we should leave the line breaking of lines after the clamp point completely UA-defined. After all, this text will always be hidden, and the line breaks can only be observed via JS, or indirectly through visible abspos.

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


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

Received on Thursday, 13 March 2025 23:33:24 UTC