मान के रूप में छिपे हुए के साथ अतिप्रवाह सीएसएस संपत्ति काम कैसे करें

Question

मेरे साथ मुश्किल समय चल रहा है overflow: hidden।

मूल रूप से, मैं एक अनियंत्रित सूची के अतिप्रवाह को छिपाने की कोशिश कर रहा हूं जो एक में स्थित है <div>।

मुझे पता नहीं क्यों यह काम नहीं कर रहा है।

इसे छिपाने के बजाय, यह एक क्षैतिज लेआउट से एक ऊर्ध्वाधर लेआउट तक मेरी सूची को तोड़ता है।

अव्यवस्थित सूची हिंडोला है और कंटेनर सूची है।

नीचे मेरा CSS कोड है;

div.body .container .images {
    background: url(/images/images-background.jpg);
    height: 62px;
    margin-bottom: 17px;
    width: 384px;
}
div.body .container .images #images-previous {
    cursor: pointer;
    float: left;
}
div.body .container .images #images-next {
    cursor: pointer;
    float: left;
}
div.body .container .images .list {
    float: left;
    overflow: hidden;
    vertical-align: top;
    width: 336px;
}
div.body .container .images .carousel {
    margin-bottom: 6px;
    margin-top: 8px;
    width: 336px;
}

यहाँ, मेरा HTML;

<div class="images">
    <div id="images-previous">
        <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
    </div>
    <div class="list">
        <ul class="carousel">
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li> 
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>    
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <!--
            <cfset i=1>
                <cfloop condition="i lte images.recordcount">
                    <cfoutput>
                        <li>
                            <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
                            <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
                            <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
                        </li>
                    </cfoutput>
                    <cfset i=i+1>
                </cfloop>
            </cfset>
            -->
        </ul>
    </div>
    <div id="images-next">
        <img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
    </div>
<div class="clear"></div>

Comments

क्या .listकोई निश्चित ऊंचाई देने के खिलाफ कुछ बोल रहा है? मुझे लगता है कि यह तब काम करेगा।

— पेका

@Pekka, यह होगा, मैं जाँच की। यह मानते हुए कि सीएसएस नियम लागू होते हैं ( क्योंकि यहां पोस्ट किया गया HTML div.bodyऔर .containerतत्व नहीं दिखाता है )

— गेब्रियल पेट्रीओली

यह काम नहीं किया। यदि सूची छिपने के बजाय ओवरफ्लो हो जाए तो यह सूची को लपेट देता है।

— डैरेन

आपके <li>लेआउट को एक क्षैतिज लेआउट कैसे मिला ? क्या आपने हमें कुछ सीएसएस दिखाने में चूक की है? वास्तव में इसके लिए क्या है? एक छवि स्लाइडर?

— मोईन ज़मान

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

— डैरेन

Answer 1

ठीक है अगर किसी और को यह समस्या हो रही है तो यह आपका जवाब हो सकता है:

यदि आप निरपेक्ष तैनात तत्वों को छिपाने की कोशिश कर रहे हैं, तो सुनिश्चित करें कि उन निरपेक्ष तैनात तत्वों का कंटेनर अपेक्षाकृत तैनात है।

Comments

मुझे एक कंटेनर में अपेक्षाकृत तैनात सामग्री के साथ एक समान समस्या थी और कंटेनर को सापेक्ष होने की भी आवश्यकता थी। तो यह न सिर्फ पूरी तरह से तैनात तत्वों को छिपा रहा है, इसके किसी भी छिपे हुए तत्व को इसकी तरह देख रहा है। :)

— क्रिस

महान - इसके अलावा नैतिक है। अतिप्रवाह: छिपा हुआ होना चाहिए। डॉक्स के लिए एक सार संदर्भ के बिना कोई भी इस मार्ग बनाम उस मार्ग को चुनने का एक अच्छा कारण प्रदान कर सकता है जो अधिक समझ में आता है?

— user1873073

वास्तव में मूल तत्व को केवल तैनात करने की आवश्यकता होती है, जिसका अर्थ है कि पूर्ण और निश्चित भी मान्य हैं। मूल रूप से कुछ भी जो स्थिर नहीं है।

— रयान जेनकिंस

शानदार जवाब, मेरे परिदृश्य के लिए भी काम किया। मेरे मामले में, अतिप्रवाह के साथ div: छिपा हुआ एक स्थिति थी: रिश्तेदार विशेषता। एक स्थिति जोड़ना: अपने माता-पिता के सापेक्ष इस मुद्दे को निर्धारित किया।

— अनुराग

Answer 2

वास्तव में...

एक निरपेक्ष तैनात तत्व को छिपाने के लिए, कंटेनर positionको छोड़कर कुछ भी होना चाहिए static। यह relativeया fixedइसके अतिरिक्त हो सकता है absolute।

Comments

किसी और से जो अभी भी इस मुद्दे का सामना कर रहा है: बच्चे को staticसहयोगी के रूप में तैनात किया जाना चाहिए , जहां तक ​​मैं बता सकता हूं। position:relativeमाता-पिता और बच्चे दोनों के लिए सेट करना काम नहीं करता है।

— एल्विन वान

Answer 3

प्रदान किए गए उत्तरों के अलावा:

ऐसा लगता है कि मूल तत्व (साथ वाला overflow:hidden) नहीं होना चाहिए display:inline। display:inline-blockमेरे लिए काम करने से बदल रहा है ।

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}

<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>

Comments

खेद है कि यह समझ में नहीं आता है, आपने इनलाइन के साथ अतिप्रवाह का प्रबंधन कैसे किया? यह भी दस्तावेज स्पष्ट है: developer.mozilla.org/en-US/docs/Web/CSS/overflow ओवरफ्लो केवल कंटेनर को ब्लॉक करने के लिए लागू होता है

— Temani Afif

ज़रूर समझ में आता है। नकारात्मक ऑफसेट के साथ स्थिति पूर्ण बाल तत्व होने का प्रयास करें। आप डिफ़ॉल्ट तत्वों जैसे LI और SPANs द्वारा इनलाइन के साथ ऐसी गलती कर सकते हैं

— Miloš Đakonović

@TemaniAfif और Miloš onakonović .. यह सही है, कि inline-blockइच्छाशक्ति, या किसी अन्य ब्लॉक जैसे प्रदर्शन प्रकार, हालांकि इस मामले में, जहां तत्व के साथ overflow: hiddenहै float, यह inlineतत्वों पर भी काम करता है।

— असॉन

जब आप स्थिति को पूर्ण रूप से जोड़ते हैं, तो तत्व एक ब्लॉक तत्व बन जाता है इसलिए यहाँ कोई इनलाइन शामिल नहीं है

— Temani Afif

@LGSon चलो अपना उदाहरण देते हैं, लेकिन अभी भी इस प्रश्न के लिए प्रासंगिक नहीं है .. शायद दूसरे प्रश्न में उपयुक्त होना चाहिए।

— तमनी अफीफ

Answer 4

जाहिर है, कभी-कभी, इस मामले से संबंधित तत्व के माता-पिता के प्रदर्शन गुणों को भी निर्धारित नहीं किया जाना चाहिए overflow:hidden, जैसे:

<div style="overflow: hidden">
  <div style="overflow: hidden">some text that should not overflow<div>
</div>

क्यों? मुझे कोई पता नहीं है लेकिन यह मेरे लिए काम करता है। देखें https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (stackoverflow पर कटाक्षों पर ध्यान न दें!)

Answer 5

इसने मेरे लिए काम किया

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

position:absoluteमूल कंटेनर में जोड़कर इसे काम किया गया।

पुनश्च: यह किसी के लिए गतिशील रूप से टेक्स्ट को ट्रंक करने वाले समाधान की तलाश में है।

EDIT: इसका मतलब इस सवाल का जवाब होना था लेकिन चूंकि वे संबंधित हैं और यह इस सवाल पर किसी की मदद कर सकता है इसलिए मैं इसे हटाने के बजाय इसे यहां छोड़ दूंगा।