फ्लेक्सबॉक्स - "नो रैप" टेक्स्ट के साथ द्रव कॉलम

Question

मैं तीन कॉलम के साथ एक फ्लेक्सबॉक्स लेआउट सेट अप करने का प्रयास कर रहा हूं। बाएं और दाएं कॉलम की एक निश्चित चौड़ाई है। केंद्र कॉलम में उपलब्ध स्थान को भरने के लिए तरल चौड़ाई है, लेकिन इसमें एक लंबा टेक्स्ट होता है, जिसे लपेटा नहीं जाना चाहिए और इसके बजाय इलिप्सिस का उपयोग करना चाहिए।

दुर्भाग्य से, गैर-लिपटे पाठ कॉलम के लिए उपलब्ध स्थान लेने की क्षमता प्रदान नहीं करता है और पूरे लेआउट को मूल तत्व की सीमाओं से परे धक्का देता है।

img { 
 
    max-width: 100%; 
 
} 
 
#container { 
 
    display: flex; 
 
    max-width: 900px; 
 
} 
 
.column.left { 
 
    width: 350px; 
 
    flex: 0 0 350px; 
 
} 
 
.column.right { 
 
    width: 350px; 
 
    flex: 0 0 350px; 
 
} 
 
.column.center { 
 
    // fluid width required 
 
} 
 

 
h1 { 
 
white-space: nowrap; 
 
overflow: hidden; 
 
text-overflow: ellipsis; 
 
}

<div id="container"> 
 
    <div class="column left"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
    <div class="column center"> 
 
    <h1> 
 
    This is long text. If overflow use ellipsis 
 
    </h1> 
 
    </div> 
 
    <div class="column right"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
</div>

लिंक बेला के लिए: http://jsfiddle.net/2Lp8d80n/

किसी भी मदद की सराहना की है।

Answer 1

आप कॉलम पर flex: 1 और overflow: hidden जोड़ सकते हैं।

इसके अलावा जब आप flex: 0 0 350px; सेट वहाँ width परिभाषित करने की आवश्यकता है, चौड़ाई 350px को तय हो गई है, या कि इस मामले में flex-basis है। ; `` फ्लेक्स के बजाय 350px:

img { 
 
    max-width: 100%; 
 
} 
 
#container { 
 
    display: flex; 
 
    max-width: 900px; 
 
} 
 
.column.left { 
 
    flex: 0 0 350px; 
 
} 
 
.column.right { 
 
    flex: 0 0 350px; 
 
} 
 
.column.center { 
 
    flex: 1; 
 
    overflow: hidden; 
 
} 
 
h1 { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div id="container"> 
 
    <div class="column left"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
    <div class="column center"> 
 
    <h1> 
 
    LONG LONG TEXT LONG LONG TEXT LONG LONG TEXT 
 
    </h1> 
 
    </div> 
 
    <div class="column right"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt=""> 
 
    </div> 
 
</div>