兩個動態寬度的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-scroll。

一旦窗口大小恢復正常時，組名會正確顯示和學員的數量將仍然正確的組名稱：

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

我預計這種情況可能與CSS可以做到，但嘗試了很多，但仍然沒有成功。我不想在JS超負荷渲染，所以最好留在CSS。請協助。

Answer 1

您可以使用float:right的數目，並使用min-width，以標題名稱與使用white-space:nowrap，overflow:hidden和text-overflow:ellipsis。

- 編輯 -

此外，儘量使用max-width和min-width爲標題。觀看演示：

http://jsfiddle.net/DxzuG/

...，你可以隨時與寬度值發揮，以滿足您的需求。

Answer 2

使用此爲省略號：

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