假设我们有一个组列表,以及每个组的学员人数,例如:
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。请协助。