Verstehen des Unterschieds zwischen overflow: hidden und display: none in CSS

Entdecken Sie die wichtigsten Unterschiede zwischen `overflow: hidden` und `display: none` in CSS. Erfahren Sie, wie jede Eigenschaft die Sichtbarkeit und das Layout von Elementen auf einer Webseite beeinflusst und wann man sie effektiv einsetzt!
---
Dieses Video basiert auf der Frage https://stackoverflow.com/q/132649/ gestellt von dem Nutzer 'user21067' ( https://stackoverflow.com/u/21067/ ) sowie auf der Antwort https://stackoverflow.com/a/132681/ bereitgestellt von dem Nutzer 'PhiLho' ( https://stackoverflow.com/u/15459/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge.

Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: What is the difference between overflow:hidden and display:none

Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l...
Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 2.5' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 2.5' ( https://creativecommons.org/licenses/... ).

Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com.
---
Verstehen des Unterschieds zwischen overflow: hidden und display: none in CSS

Beim Arbeiten mit CSS ist es essenziell, ein solides Verständnis dafür zu haben, wie Eigenschaften das Layout und die Sichtbarkeit von Elementen auf einer Webseite beeinflussen. Häufig bestehen Verwirrungen zwischen den Eigenschaften overflow: hidden und display: none. Beide werden verwendet, um zu steuern, was auf dem Bildschirm sichtbar ist, tun dies jedoch auf sehr unterschiedliche Weise. In diesem Blogbeitrag erklären wir die Unterschiede und helfen Ihnen zu verstehen, wann welche Eigenschaft sinnvoll ist.

Was ist overflow: hidden?

Die CSS-Eigenschaft overflow gibt an, wie mit Inhalten verfahren werden soll, die die Größe ihres Containers überschreiten. Bei der Verwendung von overflow: hidden teilen Sie dem Browser im Grunde mit, dass jeglicher Inhalt, der über die Grenzen des Elements hinausgeht, ausgeblendet wird, ohne das Layout anzupassen. Das bedeutet:

Der Inhalt, der die Grenzen überschreitet, wird nicht angezeigt, existiert aber weiterhin im DOM (Document Object Model).

Die Abmessungen des Elements bleiben konstant, das heißt, das umgebende Layout wird nicht beeinflusst.

Beispiel

Betrachten wir die folgende CSS-Klassendefinition:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Wenden Sie diese Klasse auf einen Container an, wird jeglicher Text, der über die Höhe von 50px hinausgeht, aus dem Blickfeld verborgen. Es ist nur der Teil des Textes sichtbar, der innerhalb des Containers Platz findet, während der Rest abgeschnitten wird. Dadurch bleibt das Layout konsistent, ohne dass der Inhalt aus dem Fluss entfernt wird.

Was ist display: none?

Im Gegensatz dazu entfernt die Eigenschaft display: none ein Element vollständig aus dem Dokumentenfluss. Die Auswirkungen auf das Layout sind dabei entscheidend:

Ein Element mit display: none wird gar nicht mehr gerendert und nimmt keinen Platz auf der Seite ein.

Andere Elemente rücken an die Stelle des ausgeblendeten Elements nach und füllen den frei gewordenen Raum auf.

Auswirkungen von display: none

display: none ist besonders nützlich in Szenarien, in denen Elemente ein- und ausgeblendet werden sollen, wie zum Beispiel bei Dropdown-Menüs oder modalen Fenstern. Da das Element komplett aus dem Layout verschwindet, entsteht eine übersichtlichere Benutzeroberfläche.

Weitere Sichtbarkeitseigenschaften

Es lohnt sich auch, die Eigenschaft visibility: hidden zu erwähnen. Während display: none ein Element aus dem Layout entfernt, blendet visibility: hidden das Element lediglich aus, lässt aber den Platz erhalten:

visibility: hidden; bedeutet, das Element ist unsichtbar, belegt aber weiterhin Raum auf der Seite, so dass andere Elemente seine Präsenz erkennen.

Zusammenfassung der wichtigsten Unterschiede

Hier eine kurze Übersicht über die Unterschiede zwischen den Eigenschaften:

EigenschaftWirkungAuswirkung auf das Layoutoverflow: hiddenBlendet überlaufenden Inhalt ausPlatz bleibt erhaltendisplay: noneEntfernt das Element komplettPlatz wird entfernt (Layout kollabiert)visibility: hiddenBlendet Inhalt aus, erhält PlatzPlatz bleibt erhaltenFazit

Das Verständnis der Unterschiede zwischen overflow: hidden und display: none ist für jeden Webentwickler oder Designer von großer Bedeutung. Durch das Wissen, wann welche Eigenschaft sinnvoll eingesetzt wird, können Sie Ihr Layout effektiver steuern und das Nutzererlebnis auf Ihrer Website verbessern. Ob Sie nur überlaufenden Inhalt ausblenden oder Elemente vollständig entfernen möchten,