如果需要，截断最后一个元素的文本

我有以下HTML代码（我正在使用bootsrap 4）：

<div class="badge-container">
  <span class="badge badge-pill badge-primary">One</span>
  <span class="badge badge-pill badge-primary">Two</span>
  <span class="badge badge-pill badge-primary">Three</span>
  <span class="badge badge-pill badge-primary">Four</span>
  <span class="badge badge-pill badge-primary">Five</span>
  <span class="badge badge-pill badge-primary">Six</span>
  <span class="badge badge-pill badge-primary">Seven</span>
  <span class="badge badge-pill badge-primary">Eight</span>
  <span class="badge badge-pill badge-primary">Nine</span>
</div>

我的广告badge-container素材有固定宽度，例如150像素，应该位于一行上。因此，所有徽章元素都不适合（我不知道的数量badge）。

我希望第一个元素溢出我的div结尾，...而下一个元素应该隐藏。例如：

一T三Fo

我尝试了以下CSS：

.badge-container {
  background: red;
  width: 150px;
  display: flex;
}

// I can use text-truncate class instead
.badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

但这不起作用，因为所有元素都被截断了...

您将如何实现？纯CSS是否有可能？