css - 一行中的两个动态宽度 div：一个带有省略号，第二个接近第一个

Question

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

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

它们列在JS网格中，每个渲染器都可以是 css 样式的。问题是：我需要显示组列表，以便学员人数与组名相符，但是当调整窗口大小（变小）时，学员人数将停留在列的右侧，但长组名会被省略号截断，例如：

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

甚至更多：

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

调整大小时，这两个 div（跨度）不应在彼此下方包裹。网格的最小宽度是已知的，所以最终会有一个 x 滚动。

恢复窗口大小后，组名将正常显示，学员人数仍与组名相同：

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

我希望这可以用CSS完成，但尝试了很多但仍然没有成功。我不想在JS中重载渲染，所以最好使用CSS。请协助。

score 1 · Accepted Answer

将此用于省略号：

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

score 0 · Accepted Answer

您可以使用float:rightto 数字，并使用 , 和使用to标题min-width名称。white-space:nowrapoverflow:hiddentext-overflow:ellipsis

- 编辑 -

此外，尝试使用max-widthandmin-width作为标题。查看演示：

...并且您始终可以使用宽度值来满足您的需求。

2 回答 2