Css 一行中有两个动态宽度div：一个带省略号，第二个靠近第一个

假设我们有一个组列表，每个组的受训人数如下：

Math (34)
Physics (22)
Lingvo (33)
...

它们列在JS网格中，每个渲染器都可以使用css样式。问题是：我需要显示组的列表，这样受训人员的数量将与组名匹配，但当窗口调整大小（变小）时，受训人员的数量将保留在列的右侧，但长组名将被省略号截断，如：

|Math (34)
|Physics (22)
|Veerryy l..(18)

更重要的是：

|Math (34)
|Physics (22)
|Veerryy..(18)

调整大小时，这两个div（span）不应将一个包裹在另一个下方。网格的最小宽度是已知的，因此最终将出现一个x轴

恢复窗口大小后，组名将正确显示，受训人数仍将正确显示组名：

|Math (34)
|Physics (22)
|Veerryy long group name (18)

---

我希望这可以通过CSS来实现，但是尝试了很多，仍然没有成功。我不想在JS中过度渲染，所以最好使用CSS。请协助。

您可以使用

浮点：右

，并使用

最小宽度

标题名，使用

空白：nowrap

，

溢出：隐藏

和

文本溢出：省略号

--编辑--

此外，尝试使用

max width

和

min width

作为标题。请参见演示：

…您可以随时根据需要使用宽度值。

使用此选项作为省略号：

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    width: auto;
}

---

对于省略号，它起作用了，但是数字在列中仍然是右对齐的。它们都应该接近组名。然后可以使用

position:relative

而不是

float:right

和

right:0

如果不使用float，那么数字div将位于名称div下面。我还将分享我如何看待这个网格的图片，但是在我有一定声誉之前不能发布。如果使用

display:inline

对两个元素（标题和数字）都使用，则数字可以保持内联，但仍然无法实现。创建。如果将窗口的大小调整为更小，则会注意到下面的第二个div换行。