仅Safari浏览器中inline-block元素的text-overflow: ellipsis失效问题

我在 Safari（版本15.6.1）中遇到了 text-overflow: ellipsis 的兼容问题：容器内包含多个 inline-block 类型的标签，希望容器宽度不足时整体显示省略号，但该效果在 Chrome（版本104.0.5112.79 64位）中正常，Safari 中失效。

现有代码 #

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;
}

问题原因 #

Safari 对 text-overflow: ellipsis 的生效条件更为严格：该属性仅对内联文本内容或包含内联内容的 inline/inline-block 容器生效。当容器为 display: block 且内部是 inline-block 元素时，浏览器会将这些子元素视为独立的块级盒子，无法触发父容器的省略号逻辑。

解决方案 #

修改容器的 display 属性为 inline-block，让 Safari 识别容器内的内容为连续的内联流，同时保留其他核心属性：

.container {
  height: 30px;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: lightblue;
  display: inline-block; /* 修改此处 */
}
.tag {
  color: white;
  display: inline-block;
  background: brown;
}

如果需要容器保持块级特性（比如占满父容器宽度），可以额外添加 width: 100%，同时给容器设置明确的最大宽度限制：

.container {
  height: 30px;
  width: 100%;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: lightblue;
  display: inline-block;
}

调整后，Safari 就能正常显示省略号效果，Chrome 的表现也不受影响。

内容的提问来源于stack exchange，提问作者Akari Nishii