Is the Firefox implementation of text-overflow and inline-block wrong?

Question

As I understand, text-overflow only apply to inline elements :

This property specifies rendering when inline content overflows its line box edge in the inline progression direction of its block container element ("the block") that has overflow other than visible.

Firefox (tested on 66.0.2 64 bits, macOS - and probably other Gecko browsers) shouldn't be ellipsing inline-block then, and plus, it does in a weird way : it reduces the whole inline-block to a "…". See the code snippet below for demonstration.

Is there something I missed on the specs, or is Gecko wrong on that point?

My question refers to these specs:

• Recommendation CSS Basic User Interface Module Level 3
• Working draft CSS Overflow Module Level 4 - no difference spotted on that particular subject

 .wrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; height: 40px; border: 1px solid lightgray; position: relative; } .wrapper div { display: inline-block; vertical-align: middle; } .wrapper img { vertical-align: middle; } .block { width: 40px; height: 40px; background: red; } 

 <small>⚠️ Case 0 : ellipsis, preceding inline-block and contained text in inline-block</small> <div class="wrapper"> <div class="block"></div> <div>I'm not concerned by ellipsis for now.</div> </div> <font color="firefox, damn">❌ Case 1 : ellipsis, preceding inline-block and overflowing text in inline-block</font> <div class="wrapper"> <div class="block"></div> <div>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</div> </div> <small>✅ Case 2 : ellipsis, no preceding block and overflowing text in inline-block</small> <div class="wrapper"> <div>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</div> </div> <small>✅ Case 3 : ellipsis, no preceding block and overflowing text in a span (inlined by default)</small> <div class="wrapper"> <img src="https://placekitten.com/40/40"> <span>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</span> </div> <small>✅ Case 4 : ellipsis, span all over the place and overflowing second text</small> <div class="wrapper"> <span>I'm a first text.</span> <span>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</span> </div> 

Answer 1

The Firefox behaviour seems perfect, is matched by Chrome V75, and is in keeping with this paragraph of the spec:

For the ellipsis value implementations must hide characters and atomic inline-level elements at the end edge of the line as necessary to fit the ellipsis, and place the ellipsis immediately adjacent to the end edge of the remaining inline content. The first character or atomic inline-level element on a line must be clipped rather than ellipsed.

So the div children of the wrapper div are display:inline-block , which means that they are atomic inline-level boxes . When there's a preceding div, then the long text is not in the first atomic inline-level element, so it can be ellipsed, and the paragraph requires that the entire atomic inline-level box must be ellipsed.