Jak sprawić, by właściwość CSS przepełnienia działała z ukrytą wartością

123

Mam z tym ciężki czas overflow: hidden.

Zasadniczo próbuję ukryć przepełnienie nieuporządkowanej listy, która znajduje się w <div>.

Nie mam pojęcia, dlaczego to nie działa.

Zamiast go ukrywać, przerywa moją listę z układu poziomego do układu pionowego.

Nieuporządkowana lista to karuzela, a kontener to lista.

Poniżej znajduje się mój kod 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;
}

Tutaj, mój 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>
css overflow html Darren
źródło
2
Czy jest coś, co przemawia przeciwko podawaniu .liststałej wysokości? Myślę, że wtedy zadziała.
Pekka
2
@Pekka, będzie, sprawdziłem. Zakładając, że zasady mają zastosowanie CSS ( ponieważ HTML zamieszczone tutaj nie pokazuje div.body, a .containerelementy )
Gabriele Petrioli
1
To nie zadziałało. Zawija listę, jeśli lista się przepełnia, zamiast ją ukrywać.
Darren,
1
Jak <li>uzyskałeś układ poziomy? Czy przegapiłeś pokazanie nam CSS? Po co to dokładnie jest? Suwak obrazu?
Moin Zaman,
1
Cześć, okazuje się, że nie mogę używać menu poziomego, ponieważ wyświetlacz pływający lub wbudowany zawsze się rozlewa z powodu szerokości nadrzędnej. Próbuję teraz stołu, ale to też jest ból.
Darren

Odpowiedzi:

397

Ok, jeśli ktoś ma ten problem, może to być Twoja odpowiedź:

Jeśli próbujesz ukryć elementy pozycjonowane bezwzględnie, upewnij się, że kontener tych elementów pozycjonowanych bezwzględnie jest umieszczony względnie.

Darren
źródło
1
Miałem podobny problem ze względnie umieszczoną zawartością w pojemniku i potrzebowałem, aby kontener też był względny. Więc nie tylko ukrywa absolutnie ustawione elementy, ale ukrywa wszystkie ustawione elementy, tak jak wygląda. :)
Chris
10
świetnie - z wyjątkiem tego, że to kretyńskie. przepełnienie: ukryte powinno być ukryte. Czy bez abstrakcyjnego odniesienia do dokumentacji ktoś może podać dobry powód, aby wybrać tę trasę w porównaniu z trasą, która ma większy sens?
user1873073,
3
W rzeczywistości element nadrzędny musi być tylko umieszczony, co oznacza, że ​​bezwzględne i stałe są również prawidłowe. Zasadniczo wszystko, co nie jest statyczne.
Ryan Jenkins
1
Świetna odpowiedź, działała też w moim scenariuszu. W moim przypadku element div z przepełnieniem: ukryty miał atrybut position: Relative. Dodanie pozycji: w stosunku do jej rodzica rozwiązało problem.
Anurag
74

Tak właściwie...

Aby ukryć element pozycjonowany bezwzględnie, kontenerem positionmusi być wszystko oprócz static. Może to być relativelub fixeddodatkowo absolute.

rw-nandemo
źródło
1
Dla każdego, kto wciąż może napotkać ten problem: dziecko musi być staticsprzymierzone, o ile wiem. Ustawienie position:relativezarówno rodzica, jak i dziecka nie działa.
Alvin Wan
6

Oprócz udzielonych odpowiedzi:

wygląda na to, że element nadrzędny (ten z overflow:hidden) nie może być display:inline. Zmiana display:inline-blockna mnie działała.

.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>
Rozwiń fragment

Miloš Đakonović
źródło
1
przepraszam, to nie ma sensu, jak udało ci się uzyskać przepełnienie z inline? również dokumentacja jest jasna: developer.mozilla.org/en-US/docs/Web/CSS/overflow przepełnienie dotyczy tylko kontenera blokowego
Temani Afif
1
Jasne, że to ma sens. Spróbuj ustawić bezwzględny element potomny pozycji z ujemnym przesunięciem. Możesz popełnić taki błąd z domyślnymi elementami wbudowanymi, takimi jak LI i SPAN
Miloš Đakonović.
1
@TemaniAfif i Miloš Đakonović .. Zgadza się, to inline-blockbędzie, lub jakikolwiek inny blok jak typ wyświetlania, chociaż w tym przypadku, gdzie element z overflow: hiddenma float, działa również na inlineelementach.
Ason
1
kiedy dodasz pozycję bezwzględną, element stanie się elementem blokowym, więc nie ma tu miejsca w
wierszu
2
@LGSon dajmy więc przykład, ale nadal nie dotyczy tego pytania .. prawdopodobnie powinien być odpowiedni w innym pytaniu.
Temani Afif
1

Najwyraźniej czasami właściwości display rodzica elementu zawierającego sprawę, która nie powinna się kończyć, również powinny być ustawione na overflow:hidden, np .:

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

Czemu? Nie mam pojęcia, ale zadziałało. Zobacz https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (zignoruj ​​sniping w stackoverflow!)

Charles Goodwin
źródło
0

To zadziałało dla mnie

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

Dodanie position:absolutedo kontenera nadrzędnego sprawiło, że zadziałało.

PS: To jest dla każdego, kto szuka rozwiązania do dynamicznego obcinania tekstu.

EDYCJA: To miała być odpowiedź na to pytanie, ale ponieważ są one powiązane i może pomóc komuś w tym pytaniu, również zostawię to tutaj, zamiast je usuwać.

YulePale
źródło