Taşma CSS özelliğinin değer olarak gizli olarak çalışmasını sağlama

123

Zor zamanlar geçiriyorum overflow: hidden.

Temel olarak, bir içinde bulunan sırasız bir listenin taşmasını gizlemeye çalışıyorum <div>.

Bunun neden işe yaramadığı hakkında hiçbir fikrim yok.

Gizlemek yerine, listemi yatay düzenden dikey düzene böler.

Sırasız liste atlı karınca ve kapsayıcı listedir.

CSS kodum aşağıdadır;

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;
}

İşte benim HTML’im;

<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>
css  overflow  html 
— Darren
kaynak
2
.listSabit bir yükseklik verilmesine karşı çıkan bir şey var mı ? O zaman işe yarayacağını düşünüyorum.
— Pekka
2
@Pekka, olacak, kontrol ettim. CSS kurallarının geçerli olduğunu varsayarsak ( çünkü burada yayınlanan HTML, div.bodyve .containeröğelerini göstermez )
— Gabriele Petrioli
1
Bu işe yaramadı. Listeyi gizlemek yerine taşarsa listeyi sarar.
— Darren
1
Sizin <li>yatay bir düzeni nasıl elde ettiniz ? Bize biraz CSS göstermeyi özlediniz mi? Bu tam olarak ne için? Görüntü kaydırıcı mı?
— Moin Zaman
1
Merhaba arkadaşlar, yatay menü kullanamıyorum çünkü float veya satır içi ekran ebeveyn genişliği nedeniyle her zaman dökülüyor. Şimdi bir masa deniyorum ama bu da bir acı.
— Darren

Yanıtlar:

397

Tamam, başka biri bu sorunu yaşıyorsa, cevabınız bu olabilir:

Mutlak konumlandırılmış öğeleri gizlemeye çalışıyorsanız, bu mutlak konumlandırılmış öğelerin konteynerinin göreceli olarak konumlandırıldığından emin olun.

— Darren
kaynak
1
Bir kapta nispeten konumlandırılmış içerikle benzer bir sorun yaşadım ve kabın da göreceli olması gerekiyordu. Yani, sadece mutlak olarak konumlandırılmış öğeleri gizlemekle kalmaz, göründüğü gibi konumlandırılmış öğeleri de gizler. :)
— Chris
10
harika - bunun dışında aptalca. taşma: gizli gizlenmelidir. Dokümanlara soyut bir referans olmadan, daha mantıklı olan rotaya karşı bu rotayı seçmek için iyi bir neden olabilir mi?
— user1873073
3
Aslında ana öğenin yalnızca konumlandırılması gerekir, bu da mutlak ve sabit olduğu anlamına gelir. Temelde statik olmayan herhangi bir şey.
— Ryan Jenkins
1
Harika cevap, senaryom için de işe yaradı. Benim durumumda, overflow: hidden özelliğine sahip div'in bir position: göreli özniteliği vardı. Bir pozisyon eklemek: üstüne göre sorunu çözdü.
— Anurag
74

Aslında...

Mutlak konumlandırılmış bir öğeyi gizlemek için, kapsayıcı positiondışında herhangi bir şey olmalıdır static. Olabilir relativeveya fixedek olarak olabilir absolute.

— rw-nandemo
kaynak
1
Hala bu sorunla karşılaşan herhangi biri için: staticanlayabildiğim kadarıyla çocuk müttefik olarak konumlandırılmalıdır. position:relativeHem ebeveyn hem de çocuk için ayarlama çalışmıyor.
— Alvin Wan
6

Verilen cevaplara ek olarak:

ebeveyn elemanın (ile bir gibi görünüyor overflow:hidden) olmamalıdır olmak display:inline. display:inline-blockBenim için çalıştı.

.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>
Snippet'i genişlet

— Miloš Đakonović
kaynak
1
üzgünüm bu mantıklı değil, inline ile taşmayı nasıl başardınız? ayrıca belgeler açıktır: developer.mozilla.org/en-US/docs/Web/CSS/overflow taşma yalnızca blok kapsayıcı için geçerlidir
— Temani Afif
1
Elbette mantıklı. Negatif ofset ile mutlak alt öğeyi konumlandırmayı deneyin. LI'ler ve SPAN'lar gibi varsayılan öğelerle satır içi olarak bu tür bir hata yapabilirsiniz
— Miloš Đakonović
1
@TemaniAfif ve Miloš Djakonovic .. Yani, bu doğru inline-blockirade, ya da başka herhangi gibi blok ile eleman bu durumda, içinde olsa da, ekran tipi overflow: hiddenvardır float, bu da işe inlineelemanları.
— Ason
1
mutlak konumu eklediğinizde, öğe bir blok öğesi haline gelir, bu nedenle burada herhangi bir satır içi yer
— almaz
2
@LGSon o zaman örnek verelim, ama yine de bu soruyla alakalı değil .. muhtemelen başka bir soru için uygun olmalı.
— Temani Afif
1

Açıktır ki, bazen, bitmemesi gereken konuyu içeren öğenin ebeveyninin görüntü özellikleri de şu şekilde ayarlanmalıdır overflow:hidden, örneğin:

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

Neden? Hiçbir fikrim yok ama benim için çalıştı. Bkz. Https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (stackoverflow'da keskin nişancı atmayı göz ardı edin!)

— Charles Goodwin
kaynak
0

Bu benim için çalıştı

<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Üst kapsayıcıya eklemek , çalışmasını sağladı.

Not: Bu, metni dinamik olarak kısaltmak için bir çözüm arayan herkes içindir.

DÜZENLEME: Bu, bu sorunun cevabı olması gerekiyordu, ancak bunlar birbirleriyle ilgili olduklarından ve bu sorudaki birine yardımcı olabileceğinden, onu silmek yerine burada da bırakacağım.

— YulePale
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.