Değişken genişlik div'ları kullanıldığında CSS text ellipsis

Question

Ebeveyn div ve komşu div yeterli alana izin vermediğinde, herhangi bir şekilde yüzer bir div gain elipsinde metin olup olmadığını merak ediyorum. Örneğin:

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

Şimdiye kadar tarayıcı penceresini crunch eğer, üst div sonra metin div beyaz boşluk yok olacak, çökecek, ancak daha fazla yer yok olduğunda, üç nokta tekme olmadı.

Yapabileceğim tek şey, pencerenin yeniden boyutlandırılması ve dinamik olarak yeni bir sabit genişliğin metin-div olarak ayarlanması durumunda bir olayı tetiklemesidir, ancak bu sadece özellikle de dolgu ve diğer komşu eşyalar gibi uygun genişlik elde etmek için çıkartın.

Bunun hakkında herhangi bir düşünce var mı?

İşte jsFiddle demo: http://jsfiddle.net/Blender/kXMz7/

Answer 1

Oldukça sezgisel bunu CSS3 esnek kutu düzenini kullanabilirsiniz

:

.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

Şirketim henüz CSS3 desteklemiyor ama sorunu başka bir çözümle çözebildim. float özniteliğini yalnızca simge div'ına uygulayarak ve ilk olarak HTML'ye koyduğunuzda, diğer div dikey konumda kalacak ve aynı zamanda yeterli alan olmadığı zaman kesilecektir.

Örnekler: http: // jsfiddle http://jsfiddle.net/qftWN/ (sağda simgesi), (solda simgesi) http://jsfiddle.net/Nr2NN/