टेक्स्ट इलिप्सिस फ्लेक्सबॉक्स आइटम

Question

पर प्रदर्शित नहीं होता है मैंने क्रोम और फ़ायरफ़ॉक्स पर text-overflow: ellipsis का परीक्षण किया है और दोनों ने टेक्स्ट को छोटा कर दिया है, लेकिन यह अंत में '...' नहीं दिखाता है। इसमें ग़लत क्या है?

मैंने min-width, max-width, max-width, flex: 0 1 auto, आदि जैसे अन्य समाधानों का उपयोग करने का प्रयास किया है, लेकिन उनमें से कोई भी काम नहीं कर रहा है। इलिप्सिस दिखाई नहीं देता है। https://jsfiddle.net/dpbejpou/1/

नोट:: मैं पहले से ही इस तरह के रूप, दूसरों के समाधान उपयोग करने की कोशिश की तरह मैंने कहा, न्यूनतम-चौड़ाई

ul { 
    display: flex; 
    height: 40px; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    list-style: none; 
} 
ul li { 
    display: flex; 
    align-items: center; 
    height: 100%; 
    padding: 0 4px; 
    border-bottom: 1px solid #eee; 
} 
ul li:first-child { 
    width: 55px; 
    flex-shrink: 0; 
} 
ul li:first-child input { 
    width: 100%; 
} 
ul li:last-child { 
    width: 48px; 
    flex-shrink: 0; 
} 
ul li:nth-child(2) { 
    flex: 0 1 auto; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    min-width: 0px; 
} 
ul li:nth-child(3) { 
    width: 75px; 
    flex-shrink: 0; 
} 

यहाँ समस्या प्रदर्शित करने के लिए एक बेला है:

यह मेरा कोड है , अधिकतम चौड़ाई (जिसे आप पहले से ही मेरे कोड में देख सकते हैं) on this link मिला लेकिन कोड स्टिल काम नहीं करता है।

Answer 1

text-overflow: ellipsis के लिए काम करने के लिए, आपके पास चौड़ाई परिभाषित होनी चाहिए। आपके पास flex-basis: auto है, जो पर्याप्त नहीं है।

इसके अलावा, text-overflow: ellipsis केवल ब्लॉक स्तर तत्वों पर काम करता है।

एक फ्लेक्स आइटम blockified माना जाता है और अंडाकार काम करेंगे। हालांकि, आप फ्लेक्स आइटम में display: flex भी लागू कर रहे हैं, जो display संपत्ति के लिए ब्लॉक-स्तरीय नियम को तोड़ता है।

इन समायोजनों का प्रयास करें:

ul { 
 
    display: flex; 
 
    height: 40px; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    /* display: flex;   <-- remove */ 
 
    /* align-items: center;  <-- will no longer work */ 
 
    height: 100%; 
 
    padding: 0 4px; 
 
    border-bottom: 1px solid #eee; 
 
} 
 
ul li:first-child { 
 
    width: 55px; 
 
    flex-shrink: 0; 
 
} 
 
ul li:first-child input { 
 
    width: 100%; 
 
} 
 
ul li:last-child { 
 
    width: 48px; 
 
    flex-shrink: 0; 
 
} 
 
ul li:nth-child(2) { 
 
    flex: 0 1 100px;    /* adjusted; 100px for demo only */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    min-width: 0px; 
 
} 
 
ul li:nth-child(3) { 
 
    width: 75px; 
 
    flex-shrink: 0; 
 
}

<ul> 
 
    <li><input type="number" value="1"></li> 
 
    <li>A very long text description goes here</li> 
 
    <li>$99.90</li> 
 
    <li>Del</li> 
 
</ul>

Revised Fiddle

खड़ी पाठ केंद्र के लिए, आपको फ्लेक्स लेआउट गैर अंडाकार तत्वों पर, इस्तेमाल कर सकते हैं जैसे आप पहले था। लंबवत रूप से एलिप्सिस टेक्स्ट को केंद्रित करने के लिए, try another method।

संदर्भ:

• Applying an ellipsis to multiline text
• How do I vertically center text with CSS?

Answer 2

यह एक Fiddle

एक अवधि जोड़ा प्रयास करें मार्कअप करने के लिए:

<ul> 
    <li><input type="number" value="1"></li> 
    <li><span>A very long text description goes here</span></li> 
    <li>$99.90</li> 
    <li>Del</li> 
</ul> 

और सिर्फ इस सीएसएस:

ul li:nth-child(2) span { 
    max-width: 135px; //change it to any max value you like 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Answer 3

तुम बस ली के प्रदर्शन फ्लेक्स संपत्ति को दूर करने की जरूरत है। कृपया डेमो जांचें।

ul li { 
    align-items: center; 
    height: 100%; 
    padding: 0 4px; 
    border-bottom: 1px solid #eee; 
} 

Demo