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;
}

Answer 2

您可以使用float:right与该号码相关联，并使用min-width标题名称，并使用white-space:nowrap，overflow:hidden和text-overflow:ellipsis。

<强> - 编辑 -

此外，请尝试使用max-width和min-width作为标题。参见演示：

...您可以随时使用宽度值来满足您的需求。