सीएसएस पाठ अंडाकार और 100 प्रतिशत चौड़ाई

Question

मैं पाठ के निम्नलिखित कंटेनर:

<div class="cardTitles"> 

<div class="title"> 
    <div class="titleContent"> 
     <i class="fa fa-star-o"></i> 
     <b>Some long long long title here</b> 
     <a href="some href"></a> 
    </div> 
</div> 

... title divs ... 

</div> 

सीएसएस:

.cardTitles { 
    width: 100%; 
    height: 100%; 
} 

.title 
{ 
    position: relative; 

    padding-top: 8px; 
    padding-bottom: 8px; 
} 

मैं पाठ पूरी चौड़ाई + पाठ-अतिप्रवाह बनाना चाहते: अंडाकार। तो जब मैं ब्राउजर का आकार बदलता हूं तो सभी title divs को अंत में तीन बिंदुओं पर कट टेक्स्ट के साथ पैरेंट cardTitles की 100% चौड़ाई पूर्ण होनी चाहिए।

मुझे पता चला कि यह फ्लेक्स का उपयोग कर संभव है। यहाँ संभव answer है:

.parent-div { 
    display: flex; 
} 

.text-div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  

    min-width: 0; 
} 

लेकिन यह मेरे लिए काम नहीं करता। जब यह कुछ बच्चे के शीर्षक की अधिकतम लंबाई तक पहुंच जाता है तो अभिभावक कंटेनर आकार बदलना बंद कर देता है।

---

आप यहाँ एक उदाहरण देख सकते हैं: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer: ब्राउज़र का आकार बदलने और पाठ के साथ शीर्षक को देखने के लिए http://88.198.106.150/tips/cpp/

प्रयास करें। मुझे इसे ओवरफ्लो इलिप्सिस बनाने की ज़रूरत है।

Answer 1

इसे आज़माएं।

यहाँ link

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

Answer 2

#div1 { 
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden; 
    text-overflow: clip; 
    border: 1px solid #000000; 
} 

#div2 { 
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border: 1px solid #000000; 
} 

है

निम्नलिखित दो divs में एक लंबा टेक्स्ट होता है जो बॉक्स में फिट नहीं होगा। जैसा कि आप देख सकते हैं, पाठ फिसल गया है।

इस div का उपयोग करता है ": क्लिप पाठ-अतिप्रवाह":

यह कुछ लंबा पाठ कि बॉक्स में फिट नहीं होगा

इस div का उपयोग करता है "पाठ-अतिप्रवाह: अंडाकार":

यह कुछ है लंबा पाठ कि बॉक्स

Answer 3

चौड़ाई पिक्सल में जोड़े जाने के लिए की जरूरत है में फिट नहीं हो, प्रतिशत अभ्यस्त अन्य तीन के साथ काम करते हैं गुण के रूप में नीचे दिए गए: -

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