css - 一行中的两个动态宽度 div : one with ellipsis, 第二个接近第一个

Question

假设，我们有一个小组列表，以及每个小组的学员人数，例如:

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。请协助。

Answer 1

将此用于省略号:

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