[csswg-drafts] [css-inline-3] `text-box` and `text-overflow` interaction (#12308)

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

== [css-inline-3] `text-box` and `text-overflow` interaction ==
I've been experimenting with `text-box` and found that it doesn't seem to work as expected when used in combination with `text-overflow` to truncate text to a single line.

Example: https://jsfiddle.net/ar1pu6qL/

The use case is, I want to use `text-box` to vertically centre some text in a box, but I also want to truncate that text to a single line using `text-overflow: ellipsis`. It could be showing a one-line preview of some potentially long text in a box or beside an icon and having it perfectly vertically centred. In order for `text-overflow` to work, I also have to specify `overflow: hidden` which seems to be problematic.

In Chrome, `overflow: hidden` cuts off the tops and bottoms of content/letters that are trimmed by `text-box`:

![Image](https://github.com/user-attachments/assets/4e11b473-e3a8-43bd-8084-e0011e099e3c)

(The first red box is without `text-box`, the second is with `text-box`.)

In Safari, `text-box` seems to be completely ignored when `overflow` is specified:

![Image](https://github.com/user-attachments/assets/8ae170fd-8c51-4611-b35b-f1112fcb9a2e)

The result I was expecting is that `text-box` both with and without `text-overflow` would look exactly the same (not cutting off vertically trimmed content) except for truncating the text. Similar to using negative margins.

This seems intentional according to the spec. The following seems to suggest that both results could be correct because the content trimmed by `text-box` is overflow: https://drafts.csswg.org/css-inline-3/#text-box-trim

> NOTE: Content and ink overflowing a box due to non-initial values of [text-box-trim](https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim) is handled the same as content that would overflow the box or line box otherwise.
>
> If, when printing, trimming a [line box](https://drafts.csswg.org/css-inline-3/#line-box) would cause its content to be clipped, the UA may ignore [text-box-trim](https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim) on that edge of that line box.

I find it a bit concerning so far that the two major browsers that claim support for `text-box` are giving different results in this case.

My next thought was, `text-box` trim causes vertical overflow, but `text-overflow` should only apply to horizontal overflow, so let's try `overflow-x: hidden; overflow-y: visible`. But this doesn't work either: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y#syntax

> If [overflow-x](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) is hidden, scroll, or auto and the overflow-y property is visible (default), the value will be implicitly computed as auto.

Unless I'm missing something, I couldn't find a way to use both `text-box` and `text-overflow` without issue. Negative margins can of course achieve the desired effect both with and without `text-overflow`, but it doesn't feel right that I can only use `text-box` with untruncated text.

Is there a better way?

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


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

Received on Monday, 9 June 2025 20:27:09 UTC