सफेद-स्थान: अब्रैप; और फ्लेक्सबॉक्स क्रोम

Question

क्रोम ब्रेक white-space: nowrapoverflow: hidden तत्व पर text-overflow: ellipsis; का उपयोग करके काम नहीं करता है। कैसे name वर्ग पर हार्ड-कोडेड चौड़ाई जोड़े बिना ठीक करने के लिए कि ..

<h1>problem</h1> 
<div class="container"> 
    <div class="name"> 
    <div class="firstname"> 
     test 
    </div> 
    <div class="lastname"> 
     as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a 
    </div> 
    </div> 
    <div class="side"> 
    options 
    </div> 
</div> 

संरचना परिवर्तन नहीं होना चाहिए क्योंकि मैं .name मेरे एप्लिकेशन में कहीं और अनुभाग का पुन: उपयोग।

.container { 
    width: 800px; 
    height: 80px; 
    display: flex; 
    border: solid 1px black; 
    margin: 10px; 
} 
.name { 
    display: flex; 
} 
.firstname { 
    width: 100px; 
    background-color: grey; 
} 
.lastname { 
    flex-grow: 1; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
} 
.side { 
    flex-grow: 0; 
} 
.side, .firstname, .lastname { 
    align-self: center; 
    padding: 0 20px; 
} 

http://codepen.io/anon/pen/xZpMYg

Answer 1

फ्लेक्स वस्तुओं पर प्रारंभिक सेटिंग न्यूनतम-चौड़ाई है के साथ काम है। तो, प्रत्येक आइटम के लिए आदेश कंटेनर के भीतर रहने के लिए हम न्यूनतम-चौड़ाई देने की आवश्यकता: 0.

min-width: 0; जोड़ें। यह आपके मामले में चारों ओर आसान काम है।

कि है

name { 
    display: flex; 
    min-width: 0; 
} 

स्निपेट

.container { 
 
    width: 800px; 
 
    height: 80px; 
 
    display: flex; 
 
    border: solid 1px black; 
 
    margin: 10px; 
 
} 
 
.name { 
 
    display: flex; 
 
    min-width: 0; 
 
} 
 
.firstname { 
 
    width: 100px; 
 
    background-color: grey; 
 
} 
 
.lastname { 
 
    flex-grow: 1; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    display: flex; 
 
} 
 
.side { 
 
    flex-grow: 0; 
 
} 
 
.side, .firstname, .lastname { 
 
    align-self: center; 
 
    padding: 0 20px; 
 
}

<h1>problem</h1> 
 
<div class="container"> 
 
    <div class="name"> 
 
    <div class="firstname"> 
 
     test 
 
    </div> 
 
    <div class="lastname"> 
 
     as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a 
 
    </div> 
 
    </div> 
 
    <div class="side"> 
 
    options 
 
    </div> 
 
</div> 
 

 
<h1>expected result</h1> 
 

 
<div class="container"> 
 
    <div class="name"> 
 
    <div class="firstname"> 
 
     test 
 
    </div> 
 
    <div class="lastname"> 
 
     as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd sa dad... 
 
    </div> 
 
    </div> 
 
    <div class="side"> 
 
    options 
 
    </div> 
 
</div>

Answer 2

पाठ-अतिप्रवाह: ऑटो: अंडाकार चौड़ाई

.lastname { 
    width: 525px; 
    flex-grow: 1; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}