1353632 - "text-overflow:ellipsis" vs. float:right produces a covered-up ellipsis in Firefox

Status: RESOLVED DUPLICATE of bug 944200

(Core :: Layout: Text and Fonts, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. Load attached testcase.
(The testcase contains an element with "text-overflow:ellipsis", and some text that collides with a right-floated child.)

ACTUAL RESULTS:
The ellipsis is covered up by the float.

EXPECTED RESULTS:
The ellipsis should happen before the float.

Latest Chrome, Safari, and Edge give EXPECTED RESULTS. Firefox gives ACTUAL RESULTS.


NOTE: This was originally filed as https://github.com/webcompat/web-bugs/issues/5442

Comment 1

[Daniel Holbert [:dholbert]]

BTW, the original STR (from the webcompat issue) are for etsy.

STR there:
 (1) In a skinny responsive design mode window (or using a phone), load https://www.etsy.com/featured/unique-discoveries
 (2) Scroll down to find an item whose shop name (the word to the left of the price) is very long.

In Firefox, the long shop names overlap the price. In Chrome, they ellipsize just before the price, so as not to overlap.

Comment 2

[Mats Palmgren (inactive)]

We actually implemented what the css-ui spec said at the time.
See discussion in bug 944200.

IIRC, I have some WIP patches for that somewhere...