सीएसएस: तत्व को छिपाने जब कंटेनर बहुत संकीर्ण जाने के लिए यह अपनी संपूर्णता में देखा जा

Question

मान लीजिए मैं अज्ञात निर्धारित चौड़ाई के एक बाहरी कंटेनर, और एक आंतरिक तत्व है, तो तरह है:

<div id="outer"><div id="inner">hide me when #outer is too small</div></div> 

वहाँ एक रास्ता है मैं #inner पूरी तरह छुपाया जा सकता है (केवल क्लिप नहीं) जब #outer शुद्ध सीएसएस का उपयोग करके इसे पूरी तरह से दिखाने के लिए पर्याप्त नहीं है?

Answer 1

यह शुद्ध सीएसएस के माध्यम से संभव नहीं है, क्योंकि आप शर्तों को प्रदान नहीं कर सकते हैं (यदि आप IE .htc फ़ाइलों का उपयोग नहीं करते हैं;))। आपको इसके लिए जेएस का उपयोग करने और दोनों तत्वों की चौड़ाई की तुलना करने की आवश्यकता है।

पाठ के लिए आप का उपयोग कर सकते हैं: text-overflow:clip|ellispis;

संपादित करें:

#inner { 
    width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

उपयोगी हो सकता है।

संपादित करें:

मैं prepared a fiddle rampion के समाधान के लिए। ध्यान दें कि कस्टम स्ट्रिंग के साथ text-overflow केवल एफएफ में काम कर रहा है। इसके अतिरिक्त, text-overflow अभी तक मानकीकृत नहीं है। W3C वर्तमान में इसे text-overflow-modeits working draft में बताता है। interesting article at MDN भी देखें।

Answer 2

Christoph's answer शायद सामान्य मामले में सबसे अच्छा है, लेकिन मेरे मामले में, मैं पाठ सामग्री नहीं बल्कि कंटेनर चौड़ाई है, जो मुझे प्रवंचना की एक अतिरिक्त परत जोड़ने जानता था:

थोड़ा एचटीएमएल फेरबदल:

<div id="first" class="container"> 
    <div><span>first_text_section</span></div> 
</div> 
<div id="second" class="container"> 
    <div><span>second_text_section</span></div> 
</div> 
<div id="third" class="container"> 
    <div><span>third_text_section</span></div> 
</div> 

और निम्नलिखित सीएसएस का उपयोग कर:

.container > div { 
    color: transparent; /* don't show the text-overflow content */ 
    overflow: hidden; 
    height: 1em; 
    width: 100%; 
} 
/* use the actual text to get the measurement right for hiding */ 
#first > div { text-overflow: "first_text_section"; } 
#second > div { text-overflow: "second_text_section"; } 
#third > div { text-overflow: "third_text_section"; } 
.container > div > span { 
    color: black; /* do show the span when possible */ 
} 

फिर कंटेनर परिवर्तन की चौड़ाई के रूप में, पूरा टेक्स्ट या तो छिपा या दिखाया अनुप्रयोग है ropriately। यदि निहित पाठ एक से अधिक शब्द है, तो पाठ शब्द से छिपा शब्द है, इसलिए यह जानना कुछ है।

Answer 3

यह तैरता के माध्यम से जे एस के बिना संभव है और एक सहायक आंतरिक तत्व जोड़:

<div class="outer"> 
    <div class="helper"></div> 
    <div class="inner">hide me when .outer is too small</div> 
</div> 

और सीएसएस:

.outer { 
    overflow: hidden; 
} 

.helper { 
    width: 1px; 
    height: 100%; 
    float: left; 
} 

.inner { 
    float: left; 
} 

भीतरी तत्व अब सहायक के तहत लपेट अगर यह फिट नहीं करता होगा बाहरी तत्व की चौड़ाई के भीतर, जिसमें .helperheight: 100% और .outer वाले overflow: hidden परिणामस्वरूप आंतरिक तत्व दिखाई नहीं दे रहा है।

आप बजाय width: 0.01px का उपयोग करके 1px सहायक चौड़ाई को दूर कर सकता है, लेकिन मुझे यकीन है कि अगर ब्राउज़र संगतता मुद्दों में चलाता है नहीं कर रहा हूँ।