Arkusz tekstowy CSS przy użyciu zmiennej szerokości div

Question

Zastanawiam się, czy istnieje sposób, aby mieć tekst w elipsy pływającej div zysk, gdy div rodzic i sąsiadujące div nie pozwalają wystarczająco dużo miejsca. Na przykład:

<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> 

Dotychczas gdybym schrupać okno przeglądarki, div rodzic załamie, to spacje w tekście DIV zniknie, ale gdy nie ma więcej miejsca, nigdy wielokropek kopać.

Jedyne co mogę zrobić, to pomyśleć, aby wyzwolić zdarzenie, kiedy zmienia rozmiar okna i dynamicznie ustawić nową stałą szerokość na text-div, ale to po prostu czuje się nieeleganckie, zwłaszcza biorąc pod wyściółkę i inne sąsiednie artefakty musiałbym odejmij, aby uzyskać odpowiednią szerokość.

Jakieś przemyślenia na ten temat?

Oto jsFiddle demo: http://jsfiddle.net/Blender/kXMz7/

Answer 1

Można użyć elastycznego układu skrzynki CSS3, aby to zrobić dość intuicyjnie:

.parent-div { 
    display: flex; 
} 

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

    min-width: 0; 
} 

.icon-div { 
    flex: 1; 
}​ 

Demo: http://jsfiddle.net/Blender/kXMz7/1/

Answer 2

Moja firma jeszcze nie obsługuje CSS3 , ale udało mi się rozwiązać problem za pomocą innego rozwiązania. Po zastosowaniu atrybutu float tylko do ikony div i umieszczeniu jej jako pierwszej w kodzie HTML, drugi element div pozostanie wyrównany w pionie, a także obcinany, gdy nie ma wystarczającej ilości miejsca.

Przykłady: (ikona po prawej) http://jsfiddle.net/qftWN/ (ikona po lewej) http://jsfiddle.net/Nr2NN/