| Summary: | `text-overflow: ellipsis` doesn't work with `overflow: clip` | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Benoît Rouleau <benoit.rouleau> | ||||||||
| Component: | CSS | Assignee: | zalan <zalan> | ||||||||
| Status: | RESOLVED FIXED | ||||||||||
| Severity: | Major | CC: | karlcow, mmaxfield, simon.fraser, webkit-bug-importer, zalan | ||||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||||
| Version: | Safari 16 | ||||||||||
| Hardware: | All | ||||||||||
| OS: | All | ||||||||||
| Attachments: |
|
||||||||||
I bet we accidentally started gating this on overflow: hidden and missed overflow: clip :/ Thank you for the report/simple test case! Created attachment 466801 [details]
Patch
Created attachment 466803 [details]
Patch
Committed 265445@main (ca9936559899): <https://commits.webkit.org/265445@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 466803 [details]. |
Created attachment 466747 [details] HTML file showing the issue See the attached HTML file. The `div` has `text-overflow: ellipsis` on it, which combined with its width that is smaller than its contents + `white-space: nowrap` + `overflow: clip`, should show an ellipsis where the text gets clipped. It works in all other major browsers (Chrome, Edge, and Firefox). In Safari, it only works if we change `overflow: clip` to `overflow: hidden`.