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

Question

我有以下 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 有一个固定的宽度，例如 150px，并且应该在一行上。所以所有的徽章元素都不适合(我事先不知道 badge 的数量)。

我希望溢出我的 div 的第一个元素以 ... 结尾，接下来的元素应该被隐藏。例如:

One Thow Three 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 中可能吗？

Answer 1

移除 flexbox 并保持简单:

.badge-container {
  background: red;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
.badge-container .badge {
  display:inline; /*Remove this to have a different rendring*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<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>