सीएसएस: डिस्प्ले: इनलाइन-फ्लेक्स और टेक्स्ट ओवरफ्लो: इलिप्सिस काम नहीं कर रहे हैं

Question

मेरे पास span है। मुझे नीचे उल्लिखित शैलियों की आवश्यकता है। लेकिन display: inline-flex के साथ, text-overflow: ellipsis काम नहीं कर रहा है।

.ed-span{ 
    display: inline-flex!important; 
    text-overflow: ellipsis; 
} 

जब मैं बदल inline-flexinline-block के लिए यह काम कर रहा है। लेकिन मुझे inline-flex की आवश्यकता है।

मैं इसे कैसे काम कर सकता हूं?

कृपया मदद करें, धन्यवाद।

Answer 1

मैं एक ही मुद्दे में भाग गया। आपको क्या करना है टेक्स्ट को किसी अन्य div के भीतर रखना है जिसमें अतिप्रवाह शैली है। इनलाइन फ्लेक्स पाठ-अतिप्रवाह का समर्थन नहीं करता, जैसा कि यहाँ देखी गई: https://bugzilla.mozilla.org/show_bug.cgi?id=912434

यह काम करना चाहिए:

<div class="parent-div"> 
    <div class="text-div"> 
    Ellipsis' are cool. 
    </div> 
</div> 

कहाँ पाठ div शैली इस प्रकार है:

.text-div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 200px; 
} 

और अभिभावक div:

.parent-div { 
    display: inline-flex; 
}