So lassen Sie die Überlauf-CSS-Eigenschaft mit verstecktem Wert arbeiten

122

Ich habe es schwer mit overflow: hidden.

Grundsätzlich versuche ich, den Überlauf einer ungeordneten Liste zu verbergen, die sich in a befindet <div>.

Ich habe keine Ahnung, warum das nicht funktioniert.

Anstatt es auszublenden, wird meine Liste von einem horizontalen in ein vertikales Layout unterteilt.

Die ungeordnete Liste ist Karussell und der Container ist Liste.

Unten ist mein CSS-Code;

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

Hier mein 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
quelle

2

Spricht etwas gegen .listeine feste Höhe? Ich denke es würde dann funktionieren.

Pekka

2

@ Pekka, das werde ich, habe ich überprüft. Angenommen, die CSS-Regeln gelten ( weil der hier veröffentlichte HTML-Code die div.bodyund die .containerElemente nicht

anzeigt

1

Das hat nicht funktioniert. Es umschließt die Liste, wenn die Liste überläuft, anstatt sie auszublenden.

Darren

1

Wie haben Sie <li>ein horizontales Layout erhalten? Haben Sie es versäumt, uns CSS zu zeigen? Wofür genau ist das? Ein Bildschieberegler?

Moin Zaman

1

Hallo Leute, es stellt sich heraus, dass ich kein horizontales Menü verwenden kann, da die Float- oder Inline-Anzeige aufgrund der übergeordneten Breite immer verschüttet wird. Ich versuche jetzt einen Tisch, aber das ist auch ein Schmerz.

Darren

396

Ok, wenn jemand anderes dieses Problem hat, könnte dies Ihre Antwort sein:

Wenn Sie versuchen, absolut positionierte Elemente auszublenden, stellen Sie sicher, dass der Container dieser absolut positionierten Elemente relativ positioniert ist.

Darren
quelle

1

Ich hatte ein ähnliches Problem mit relativ positionierten Inhalten in einem Container und musste den Container auch relativ sein. Es versteckt also nicht nur absolut positionierte Elemente, sondern auch alle positionierten Elemente, wie es aussieht. :)

Chris

10

großartig - außer das ist schwachsinnig. Überlauf: versteckt sollte versteckt sein. Kann jemand ohne einen abstrakten Verweis auf die Dokumente einen guten Grund für die Wahl dieser Route im Vergleich zu der Route angeben, die sinnvoller ist?

user1873073

3

Tatsächlich muss das übergeordnete Element nur positioniert werden, was bedeutet, dass auch absolut und fest gültig sind. Grundsätzlich alles, was nicht statisch ist.

Ryan Jenkins

1

Tolle Antwort, hat auch für mein Szenario funktioniert. In meinem Fall hatte das div mit Überlauf: versteckt ein Attribut position: relative. Hinzufügen einer Position: relativ zum übergeordneten Element wurde das Problem behoben.

Anurag

74

Tatsächlich...

Um ein absolut positioniertes Element auszublenden, positionmuss der Container alles andere als sein static. Es kann relativeoder fixedzusätzlich sein absolute.

rw-nandemo
quelle

1

An alle anderen, die möglicherweise noch auf dieses Problem stoßen: Das Kind muss static, soweit ich das beurteilen kann, verbündet sein. Die Einstellung position:relativeauf Eltern und Kind funktioniert nicht.

Alvin Wan

6

Zusätzlich zu den bereitgestellten Antworten:

es scheint, als ob das übergeordnete Element (das mit overflow:hidden) nicht sein darf display:inline. Wechsel zu display:inline-blockarbeitete für mich.

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

Erweitern Sie das Snippet

Miloš Đakonović
quelle

1

Entschuldigung, das macht keinen Sinn. Wie haben Sie es geschafft, mit Inline überzulaufen? Auch die Dokumentation ist klar: developer.mozilla.org/en-US/docs/Web/CSS/overflow Der Überlauf gilt nur für

Blockcontainer

1

Sicher macht es Sinn. Versuchen Sie, ein absolutes untergeordnetes Element mit negativem Versatz zu positionieren. Sie können einen solchen Fehler mit Inline-Standardelementen wie LIs und SPANs machen

Miloš Đakonović

1

@TemaniAfif und Miloš Đakonović .. Das ist richtig, dass inline-blockWille, oder jeder anderer Block wie Darstellungsart, obwohl in diesem Fall, in dem das Element mit overflow: hiddenhat float, es auf auch arbeitet inlineElemente.

Ason

1

Wenn Sie die absolute Position hinzufügen, wird das Element zu einem Blockelement, sodass hier keine Inline beteiligt ist

Temani Afif

2

@LGSon Lassen Sie uns dann Ihr Beispiel setzen, aber immer noch nicht relevant für diese Frage .. sollte wahrscheinlich für eine andere Frage geeignet sein.

Temani Afif

1

Offensichtlich manchmal, die Anzeigeeigenschaften der Eltern des Elements enthält , die Sache , die nicht über sollte sollte auch eingestellt werden overflow:hiddenals auch, zum Beispiel:

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

Warum? Ich habe keine Ahnung, aber es hat bei mir funktioniert. Siehe https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (ignorieren Sie das Sniping bei Stackoverflow!)

Charles Goodwin
quelle

0

Das hat bei mir funktioniert

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

Das Hinzufügen position:absolutezum übergeordneten Container hat funktioniert.

PS: Dies ist für alle, die nach einer Lösung zum dynamischen Abschneiden von Text suchen.

EDIT: Dies sollte eine Antwort auf diese Frage sein, aber da sie verwandt sind und jemandem bei dieser Frage helfen könnten, werde ich sie auch hier lassen, anstatt sie zu löschen.

YulePale
quelle