内联块项目的省略号仅适用于Safari

Question

我当前在使用css属性text-overflow: ellipsis;的Safari时遇到问题。假设我想在容器中显示一些标签(内联块(，并尝试显示"…"如果标签太长。以下是它在Chrome上正常工作的代码(版本104.0.5112.79(官方版本((64位((

HTML:

<div class="container">
<div class="tag">aaaa</div>
<div class="tag">bbbbbb</div>
<div class="tag">ccc</div>
</div>

CSS：

.container {
height: 30px;

width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: lightblue;
display: block;
}
.tag {
color: white;

display: inline-block;
background: brown;
}

并且看起来如预期：https://i.stack.imgur.com/kYz8w.png

但在Safari(15.6.1版(中，省略号不起作用，看起来是这样的：https://i.stack.imgur.com/xsJg6.png

你可以在这里查看它的工作原理：https://codepen.io/akari0731/pen/KKRVoWW

我觉得我错过了什么，但不知道到底是什么。有人能帮我吗？

Answer 1

有点麻烦，但您可以将.tag设置为display: contents。

说实话，我不确定为什么原件不能通过工作