Bug 5990 – Boxes should work with text-overflow: ellipsis

• Component: CSS
• Status: REOPENED

[Timothy Hatcher]

It seems that boxes will clip their content similar to "overflow: hidden" naturally, except "text-overflow: 
ellipsis" does not work.

[Timothy Hatcher]

Created attachment 4991 [details]
Testcase showing expected behavior and actual behavior with boxes.

I was wrong earlier about boxes having a natural clip, you still need to use
overflow: hidden and in my case white-space: nowrap.

[Eric Seidel (no email)]

This looks to be working, unless I'm missing something??  FireFox does not render the elipsis, but I'm not 
sure they support overflow: elipsis;

Only one question remains as to if we need to land this test case.  Tim? Hyatt?

[Timothy Hatcher]

This is still broken. Make sure you run the test on TOT, it works with the release Safari/WebKit (likely due 
to it ignoring the display: -apple-box and treating the div as a block.)

[Ahmad Saleem]

I am able to reproduce this bug using attached test case in Safari 15.6 on macOS 12.5, for red container named (Box w/ text-overflow ellipsis), it is not shown ellipsis in the end while all other browsers (Chrome Canary 106 and Firefox Nightly 104) do it. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/97488477>

[Karl Dubost]

https://oisaur.com/@renchap/113276852782235890

> I do not know if I have some Webkit developers here but… we are currently blocked by https://bugs.webkit.org/show_bug.cgi?id=5990 for the Mastodon Web UI, a bug from 2005 where the ellipsis is not shown if the container contains boxes. It works in Firefox and Chrome, and all the alternatives require heavy JS.
Here is a codepen with an example, you can see that the list does not display ellipsises in Safari: https://codepen.io/vincent-valentin/pen/WNVGVjK/8c1bac071f91b67f51516a4d2bf3276b

Anything we can do to get this fixed?

[Karl Dubost]

The full previous comment is from the message. I missed some quoting characters.

[Karl Dubost]

Created attachment 472877 [details]
rendering in safari, firefox, chrome

Rendering tested on 

Safari Technology Preview  205           20621.1.2.111.4
Firefox Nightly            133.0a1       13324.10.4
Google Chrome Canary       131.0.6766.0  6766.0

[Karl Dubost]

Created attachment 472878 [details]
testcase rendering in safari, firefox, chrome

Same browsers, but this time rendering for the testcase attached to the bug.

[Karl Dubost]

The testcase is quite old here. As it is using

```
.container {
    display: -apple-box;
    border: 1px solid red;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
```

`display: -apple-box` not being supported on firefox and chrome, it defaults to `display: block`
So it's probably not relevant anymore in this context. 

The test in the codepen is more interesting. Maybe another should be opened.

[Karl Dubost]

if I replace `-apple-box` by `-webkit-box`, then the 3 browsers behave the same.

[Karl Dubost]

I opened bug 281136 for the specific bug reported by Vincent Valentin and @renchap