2

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

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

4

2 回答 2

1

将此用于省略号:

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    width: auto;
}
于 2013-03-04T16:54:39.507 回答
0

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

- 编辑 -

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

http://jsfiddle.net/DxzuG/

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

于 2013-03-04T16:53:13.437 回答