css - सीएसएस पाठ-ओवरफ्लो: इलिप्सिस; काम नहीं कर रहा?




overflow ellipsis (5)

आप फ्लोट भी जोड़ सकते हैं: बाएं; इस कक्षा के अंदर #User_Apps_Content .DLD_App ए

मुझे नहीं पता कि यह सरल सीएसएस क्यों काम नहीं कर रहा है ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  font: bold 15px/18px Arial;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FFF;
}
<div class="app">
  <img src=""></img>
  <h1></h1>
  <a href=""></a>
</div>


आप बस एक लाइन सीएसएस जोड़ें:

.app a {
   display: inline-block;
}

यह भी सुनिश्चित करें कि IE10 और नीचे के लिए word-wrap सामान्य पर सेट है।

नीचे दिए गए मानकों को इस संपत्ति के व्यवहार को "टेक्स्ट-रैप" संपत्ति की सेटिंग पर निर्भर होने के रूप में परिभाषित किया गया है। हालांकि, वर्डप्रेस सेटिंग्स विंडोज इंटरनेट एक्सप्लोरर में हमेशा प्रभावी होती हैं क्योंकि इंटरनेट एक्सप्लोरर "टेक्स्ट-रैप" संपत्ति का समर्थन नहीं करता है।

इसलिए मेरे मामले में, word-wrap को ब्रेक-वर्ड (विरासत में या डिफ़ॉल्ट रूप से?) पर सेट किया गया था जिससे text-overflow एफएफ और क्रोम में काम करने के लिए प्रेरित था, लेकिन आईई में नहीं।

शब्द-लपेट संपत्ति पर एमएस जानकारी


anchor , span ... टैग डिफ़ॉल्ट रूप से इनलाइन तत्व हैं, इनलाइन तत्वों की width संपत्ति के मामले में काम नहीं करता है। इसलिए आपको अपने तत्व को inline-block या block level तत्वों में परिवर्तित करना होगा


text-overflow:ellipsis; केवल तभी काम करता है जब निम्नलिखित सत्य होते हैं:

  • तत्व की चौड़ाई को px (पिक्सल) में बाध्य होना चाहिए। % (प्रतिशत) में चौड़ाई काम नहीं करेगी।
  • तत्व में overflow:hidden होना चाहिए overflow:hidden और white-space:nowrap सेट।

आपको यहां समस्याएं होने का कारण यह है कि आपके तत्व की width बाध्य नहीं है। आपके पास width सेटिंग है, लेकिन क्योंकि तत्व display:inline करने के लिए सेट है display:inline (यानी डिफ़ॉल्ट) यह इसे अनदेखा कर रहा है, और कुछ भी इसकी चौड़ाई को बाधित नहीं कर रहा है।

आप निम्न में से कोई एक करके इसे ठीक कर सकते हैं:

  • तत्व को display:inline-block करने के लिए सेट करें display:inline-block या display:block (शायद पूर्व, लेकिन आपकी लेआउट जरूरतों पर निर्भर करता है)।
  • display:block करने के लिए इसके कंटेनर तत्वों में से एक सेट करें display:block और उस तत्व को एक निश्चित width या max-width
  • तत्व को float:left करने के लिए सेट करें float:left या float:right (शायद पूर्व, लेकिन फिर से, या तो एलीप्सिस के संबंध में एक ही प्रभाव होना चाहिए)।

मैं display:inline-block सुझाव दूंगा display:inline-block , क्योंकि इससे आपके लेआउट पर न्यूनतम संपार्श्विक प्रभाव होगा; यह display:inline तरह बहुत काम करता है display:inline का उपयोग वर्तमान में लेआउट के संबंध में किया जा रहा है, लेकिन अन्य बिंदुओं के साथ प्रयोग करने के लिए स्वतंत्र महसूस करें; मैंने यह समझने में आपकी सहायता के लिए जितनी संभव हो उतनी जानकारी देने की कोशिश की है कि ये चीजें कैसे एक साथ बातचीत करती हैं; सीएसएस को समझने का एक बड़ा हिस्सा यह समझने के बारे में है कि विभिन्न शैलियों एक साथ कैसे काम करते हैं।

उम्मीद है की वो मदद करदे।

यहां एक display:inline-block साथ आपके कोड के साथ एक jsfiddle है display:inline-block जोड़ा गया, यह दिखाने के लिए कि आप कितने करीब थे।

उपयोगी संदर्भ:





css3