It seems that according to the text-overflow specification, the ellipsis effect only applies to inline elements:
This property defines how content within an inline element is displayed when it overflows its container's boundaries in the inline direction.
However, while testing on Firefox (version 66.0.2 64-bit on macOS), it appears that the ellipsis is not being correctly applied to inline-block elements as specified. Instead, Firefox displays a whole inline-block as "…". See the code snippet below for a demonstration.
Is there a misinterpretation of the specifications or is this a bug in the Gecko browser?
My inquiry pertains to the following specifications:
- CSS Basic User Interface Module Level 3 Recommendation
- Working draft CSS Overflow Module Level 4 - no discrepancy identified on this particular issue
.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>