मैं सीएसएस ग्रिड लेआउट में इलिप्सिस में टेक्स्ट-ओवरफ्लो कैसे सेट करूं?

Question

मेरे पास नीचे एक ग्रिड लेआउट है जो header में से एक है। Div में एक पाठ है जिसका चौड़ाई 1fr है। मैं उस div के अंदर पाठ को बहुत लंबा होने पर छोटा कर देना चाहता हूं। text-overflow को ellpsis के रूप में जोड़ना काम नहीं कर रहा है। कोई विचार यह कैसे करना है?

इसे ग्रिड होना चाहिए और मैं इसे बदलने का कोई तरीका नहीं हूं।

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
content { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
header { 
 
    background-color: limegreen; 
 
    display: grid; 
 
    grid-template-columns: 0fr 1fr 0fr; 
 
} 
 

 
header div { 
 
    border: 1px solid orange; 
 
} 
 

 
.long { 
 
    text-overflow: ellipsis; 
 
}

<div class="container"> 
 
    <header> 
 
    <div>Left</div> 
 
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    <div>Right</div> 
 
    </header> 
 
    <content> 
 
    </content> 
 
</div>

Answer 1

परिवर्तन .long ग white-space सेट नीचे

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

कारण है कि आप सफेद sapce और अतिप्रवाह जोड़ने की जरूरत के लिए एस एस के नीचे है:

1. आप white-space: nowrap जरूरत ब्राउज़रों बताने के लिए रैप नहीं करने के लिए जब पाठ की लंबाई ब्लॉक चौड़ाई, white-space गुण युक्त से अधिक डिफ़ॉल्ट मान सामान्य है, जो इंगित करता है कि यह लपेट सकता है, इसलिए यह उस स्थिति में मौजूद नहीं होगा जहां टेक्स्ट ओवरफ़्लो;
2. overflow डिफ़ॉल्ट मान जब पाठ खंड युक्त से अधिक है, यह सिर्फ प्रदर्शित करते हैं, दिखाई दे रहा है, तो प्रदर्शित करने के लिए पाठ से ऊपर जाने का है, तो आप hidden को overflow सेट ही अगर कोई जरूरत नहीं है। फिर, जब पाठ पूरी तरह से प्रदर्शित नहीं हो सकता है, तो यह text-overflow संपत्ति का उपयोग करेगा।

Answer 2

जोड़े overflow: hidden और white-space: nowrap जब आप इस्तेमाल किया text-overflow

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
content { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
header { 
 
    background-color: limegreen; 
 
    display: grid; 
 
    grid-template-columns: 0fr 1fr 0fr; 
 
} 
 

 
header div { 
 
    border: 1px solid orange; 
 
} 
 

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

<div class="container"> 
 
    <header> 
 
    <div>Left</div> 
 
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    <div>Right</div> 
 
    </header> 
 
    <content> 
 
    </content> 
 
</div>

Answer 3

1) जब उपयोग text-overflow: ellipsis; को overflow: hidden; का भी उपयोग करना चाहिए।

2) white-space: nowrap; नई लाइन में टेक्स्ट ब्रेक की अनुमति नहीं देता है।

तो, यह की तरह बदलें:

.long { 
    text-overflow: ellipsis; 
    overflow: hidden;/*/<------------new/*/ 
    white-space: nowrap;/*/<---------new/*/ 
} 

Answer 4

ऊंचाई को परिभाषित करें, nowrap और overflow: hidden

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
content { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
header { 
 
    background-color: limegreen; 
 
    display: grid; 
 
    grid-template-columns: 0fr 1fr 0fr; 
 
} 
 

 
header div { 
 
    border: 1px solid orange; 
 
} 
 

 
.long { 
 
    height: 20px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="container"> 
 
    <header> 
 
    <div>Left</div> 
 
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    <div>Right</div> 
 
    </header> 
 
    <content> 
 
    </content> 
 
</div>