चरम चौड़ाई divs

Question

का उपयोग करते समय सीएसएस पाठ इलिप्सिस मैं सोच रहा हूं कि क्या फ्लोटिंग div gain ellipsis में टेक्स्ट होने का कोई तरीका है जब माता-पिता div और पड़ोसी div पर्याप्त कमरे की अनुमति नहीं देते हैं। उदाहरण के लिए:

<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 में सफेद स्थान गायब हो जाएगा, लेकिन जब वहाँ कोई और अधिक कमरा है, अंडाकार में लात कभी नहीं।

एकमात्र चीज जो मैं सोच सकता हूं वह एक घटना को ट्रिगर करता है जब खिड़की का आकार बदलता है और गतिशील रूप से पाठ-div पर एक नई निश्चित चौड़ाई निर्धारित करता है, लेकिन यह केवल सुरुचिपूर्ण महसूस करता है, विशेष रूप से पैडिंग और अन्य पड़ोसी कलाकृतियों पर विचार करना उचित चौड़ाई पाने के लिए बाहर निकलें।

इस पर कोई विचार?

यहाँ एक jsFiddle डेमो है: http://jsfiddle.net/Blender/kXMz7/

Answer 1

आप बहुत सहज यह करने के लिए 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/

Answer 2

मेरी कंपनी CSS3 अभी तक का समर्थन नहीं करता , लेकिन मैं किसी अन्य समाधान के साथ समस्या को हल करने में सक्षम था। float को केवल आइकन div पर विशेषता दें और इसे पहले HTML में डालें, अन्य div लंबवत रूप से गठबंधन रहेगा जबकि पर्याप्त कमरे नहीं होने पर भी छंटनी होगी।

उदाहरण: http: // jsfiddle http://jsfiddle.net/qftWN/ (दाईं ओर आइकन), (बाईं ओर आइकन) http://jsfiddle.net/Nr2NN/