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

我有以下HTML代码（我使用的是BootsRap4）：

一个
两个
三
四
五
六
七
八
九

我的

徽章容器

有一个固定的宽度，例如150px，应该在一行上。因此，所有的徽章元素都不适合（我事先不知道

徽章的数量）

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

三个一个

我尝试了以下CSS：

.badge容器{
背景：红色；
宽度：150px；
显示器：flex；
}
//我可以使用文本截断类代替
.徽章{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}

但它不工作，因为所有的元素都被截断了

你将如何做到这一点？
这在纯CSS中是否可行？
删除flexbox并保持简单：


.badge容器{
背景：红色；
宽度：170px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.徽章容器.徽章{
display:inline；/*删除此项以获得不同的格式副本*/
}

一个
两个
三
四
五
六
七
八
九
卸下flexbox并保持简单：


.badge容器{
背景：红色；
宽度：170px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.徽章容器.徽章{
display:inline；/*删除此项以获得不同的格式副本*/
}

一个
两个
三
四
五
六
七
八
九
您已经接近解决方案，您的问题是您将截断代码应用于它自己的元素，并且它必须应用于容器才能具有所需的行为。大概是这样的：


.badge容器{
宽度：200px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
背景：红色；
}

一个
两个
三
四
五
六
七
八
九
您已经接近解决方案，您的问题是您将截断代码应用于它自己的元素，并且它必须应用于容器才能具有所需的行为。大概是这样的：


.badge容器{
宽度：200px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
背景：红色；
}

一个
两个
三
四
五
六
七
八
九
这应该按预期工作：

.badge-container {
  background: red;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

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

这应该如预期的那样起作用：

.badge-container {
  background: red;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

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

HTML
一个
两个
三
四
五
六
七
八
九
CSS
.徽章容器{
背景：红色；
宽度：130px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.徽章容器.徽章{
display:inline；/*删除此项以获得不同的格式副本*/
}
.徽章容器：悬停{
溢出：可见；
宽度：400px；
}
HTML
一个
两个
三
四
五
六
七
八
九
CSS
.徽章容器{
背景：红色；
宽度：130px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.徽章容器.徽章{
display:inline；/*删除此项以获得不同的格式副本*/
}
.徽章容器：悬停{
溢出：可见；
宽度：400px；
}
对于这一点，与flexbox合作可能不是最好的主意，因为“挤压”元素以尝试将其放入一行。与flexbox合作可能不是最好的主意，因为“挤压”元素以尝试将其放入一行。谢谢，我已经试过了，但是这个解决方案有问题。首先，点位于徽章外部，因此它与徽章重叠渲染。然后我们在某些情况下看到下一个徽章元素（检查我的小提琴）@youri我在代码中添加了
display:inline
，删除/添加它，您将拥有不同的格式副本，这取决于您是否想看到完整的徽章谢谢，我已经尝试过了，但此解决方案存在问题。首先，点位于徽章外部，因此它与徽章重叠渲染。然后我们在某些情况下看到下一个徽章元素（检查我的小提琴）@youri我在代码中添加了
display:inline
，删除/添加它，您将拥有不同的格式副本，这取决于您是否想看到完整的徽章谢谢，我已经尝试过了，但此解决方案存在问题。首先，点位于徽章外部，因此它与徽章重叠渲染。然后我们在某些情况下看到下一个徽章元素（检查我的小提琴）谢谢，我已经试过了，但是这个解决方案有问题。首先，点位于徽章外部，因此它与徽章重叠渲染。然后我们看到下一个徽章元素在某些情况下（检查我的小提琴）谢谢你，它正在工作。是否可以将这三个点放在
徽章中，或将其做成样式？谢谢，它正在工作。是否可以将三个点放在
徽章中
或将其样式化？