使用可變寬度的div時的CSS文本省略號

我想知道是否有任何方式在浮動div中獲得文本時，如果父div和鄰居div不允許有足夠的空間，可以省略省略號。例如：使用可變寬度的div時的CSS文本省略號

<style> 
.parent-div { 
    width: 100%; 
    border: 1px; 
    padding: 4px; 
} 
.text-div { 
    float: right; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  
} 
.icon-div { 
    float: left; 
} 
</style> 
<div class="parent-div"> 
    <div class="text-div">This is text I'd like to truncate when space doesn't permit</div> 
    <div class="icon-div">X</div> 
</div>

如果我緊縮的瀏覽器窗口到目前爲止，父DIV會崩潰，然後在文本DIV白色的空間將消失，但在沒有更多的空間，省略號永遠不會踢。

我唯一能想到的就是觸發一個事件，當窗口調整大小並在text-div上動態設置一個新的固定寬度時，但這只是感覺不雅，尤其是考慮到填充和其他鄰近的工件減去以獲得適當的寬度。

對此有何看法？

這裏有一個的jsfiddle演示：http://jsfiddle.net/Blender/kXMz7/

來源

2012-09-29 Anthony

如果你不關心支持舊的瀏覽器，你可以使用Flexbox，就使這個很簡單：HTTP：//的jsfiddle。 net/Blender/kXMz7/1/ – Blender

這是完美的攪拌機！我積極不支持舊版瀏覽器，所以效果很好。 :)顯然，它放在桌子裏面不起作用，但我可以解決這個問題。謝謝！如果您單獨發佈您的答案，我會將其標記爲正確的答案。 – Anthony

您可以使用CSS3靈活的盒子佈局要做到這一點非常直觀：

.parent-div { 
    display: flex; 
} 

.text-div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  

    min-width: 0; 
} 

.icon-div { 
    flex: 1; 
}

演示：http://jsfiddle.net/Blender/kXMz7/1/

來源

2012-09-29 21:37:49 Blender

完美的作品！謝謝攪拌機！ – Anthony

+1，因爲解決方案完美無缺。儘管請注意，靈活框佈局仍處於候選推薦階段，並且得不到廣泛支持。它將工作在鉻，火狐，Safari與廠商前綴。 Internet Explorer僅在IE10中開始支持此功能。 http://caniuse.com/flexbox – Michael

正在尋找這個答案很長一段時間！謝謝:-) – Rikki