Firefox的文本溢出和內聯塊的實現是錯誤的嗎？

Question

據我了解， 文本溢出僅適用於內聯元素 ：

此屬性指定當內聯內容在其塊容器元素（“塊”）的內聯行進方向上溢出其行框邊緣時的呈現，該塊容器元素具有溢出而不是可見。

Firefox（在66.0.2 64位上測試，macOS - 可能還有其他Gecko瀏覽器）不應該是內聯塊 ，而且，它以奇怪的方式實現：它將整個內聯塊減少為“......” 。 請參閱下面的代碼段以進行演示。

有沒有我錯過的規格，或者Gecko錯在那一點？

我的問題涉及這些規格：

• 推薦CSS基本用戶界面模塊3級
• 工作草案CSS溢出模塊4級 - 在該特定主題上沒有發現任何差異

 .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

Firefox的行為看起來很完美，與Chrome V75相匹配，並且符合規范的這一段：

對於省略號值，實現必須隱藏行的末尾邊緣處的字符和原子內聯級元素以適合省略號，並將省略號緊鄰剩余內聯內容的結束邊緣放置。 必須剪切線上的第一個字符或原子內聯級元素而不是省略。

所以包裝器div的div子元素是display:inline-block ，這意味着它們是原子內聯級別的盒子 。 如果有前面的div，則長文本不在第一個原子內聯級元素中，因此它可以是省略的，並且段落要求必須省略整個原子內聯級別框。