Re: [csswg-drafts] [css-overflow] consider giving more fine control on ellipsis (#5417)

To allow more fine-grained control over what's ellipsized first, a `text-overflow-priority` (name to be discussed) could be introduced. The higher the priority the later it gets ellipsized when there's not enough space.

With that, the expected output of the given example could be achieved like this:

```css
.ellipsis {
  text-overflow: ellipsis;
}

.name {
  text-overflow-priority: 1;
}

.bracket {
  text-overflow-priority: 2;
}

.mail {
  text-overflow-priority: 3;
}
```

Note: The HTML would have to be adjusted slightly to get the expected results (also, removing classes unnecessary for the example):

```html
<span class="ellipsis">
  <span class="name">test account</span> 
  <span class="mail"><span class="bracket">&lt;</span>testaccount@protonmail.com<span class="bracket">&gt;</span></span>
</span>
```

I see some issues with this solution, though, that need to be discussed:

1. It requires to adjust the HTML structure for controlling the display.
2. How does ellipsizing behave if higher-priority parts are surrounded by lower-priority parts.
3. It doesn't provide an option to completely avoid ellipsizing, which might be required for some use cases (e.g. extensions of file names).
4. It requires to switch from ellipsizing the different parts to clipping them once they are completely ellipsized and start ellipsizing other parts.

Sebastian

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


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

Received on Monday, 18 August 2025 22:30:19 UTC