假设,我们有一个组列表,每个组的受训人数如下:
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。请协助。
最佳答案
您可以对数字使用float:right
,并使用min-width
、white-space:nowrap
和overflow:hidden
对标题名使用text-overflow:ellipsis
。
--编辑--
此外,尝试使用max-width
和min-width
作为标题。查看演示:
http://jsfiddle.net/DxzuG/
…并且您可以始终使用宽度值来满足您的需要。