Closed
Bug 736458
Opened 12 years ago
Closed 4 years ago
Incorrect layout for truncated line of text followed by a simple decorator
Categories
(Core :: Layout: Block and Inline, defect)
Core
Layout: Block and Inline
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: randy.hudson, Unassigned)
References
Details
(Keywords: testcase)
Attachments
(6 files)
Safari truncated.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.52.7 (KHTML, like Gecko) Version/5.1.2 Safari/534.52.7 Steps to reproduce: Using version 10.0.2 of Firefox, I have HTML that displays a title on a single line of text. The title is followed by an important decorator. If the title does not fit, the title should be truncated, but the decorator must remain visible. Here are two different HTML+CSS solutions that work in both Webkit (Safari 5) and Internet Explorer 8, but fail in Firefox: <!DOCTYPE html> <html> <body> <!-- SOLUTION 1 --> <div> <div style="overflow: hidden;display:inline-block;position:relative;max-width: 100%;white-space: nowrap;"> <div style="display:block;float:right;"> (TRAILING DECORATOR)</div> <div style="text-overflow: ellipsis;overflow:hidden;">Primary title that could be really long and should never wrap or cause horizontal scrollbars</div> </div> </div> <!-- SOLUTION 2 --> <div> <div style="overflow: hidden;display:inline-block;position:relative;max-width: 100%;white-space: nowrap;"> <div style="overflow: hidden;text-overflow: ellipsis;"> <div style="display:block;float:right;"> (TRAILING DECORATOR)</div> <span>Primary title that could be really long and should never wrap or cause horizontal scrollbars</span> </div> </div> </div> </body> </html> Actual results: In both cases, it seems like the right float is not being accounted for correctly in the width of the containing inline block. In SOLUTION 1, the inline block stops getting wider, causing the title to be truncated even if there is plenty of width available. In SOLUTION 2, the span containing the title is not truncated as soon as it runs into the right float. Instead, it runs right through the float and is only clipped once it reaches the edge of the containing div. Expected results: See attachments for Safari
|
||
Comment 4•12 years ago
|
||
|
|
||
Comment 5•12 years ago
|
||
It's not just inline-block, but shrink-to-fit in general.
|
|
||
Comment 6•12 years ago
|
||
Other UAs agree on the layout on these tests, the shrink-to-fit width is the width of the text + the width of the float child. It seems we don't take the width of the float into account for the preferred width. I think this is a bug, but I can't find a duplicate.
Component: Layout → Layout: Block and Inline
Keywords: testcase
OS: Mac OS X → All
QA Contact: untriaged → layout.block-and-inline
Hardware: x86 → All
Version: 10 Branch → unspecified
|
|
||
Comment 7•12 years ago
|
||
> Other UAs agree on the layout on these tests
... when the window is wide enough to render all content without line breaks, that is.Is there any alternative method for achieving the same layout in firefox? Perhaps using a table?
|
||
Comment 9•4 years ago
|
||
The original testcase here worksforme in a current nightly.
Did a bit of bisecting on nightlies, and it was fixed in this commit range back in 2016: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=dbe4b47941c7b3d6298a0ead5e40dd828096c808&tochange=8c9c4e816e86f903c1d820f3f29715dc070a5a4a
Perhaps the intrinsic width computation changes in bug 1260031 ?
You need to log in
before you can comment on or make changes to this bug.
Description
•