Inhaltsüberlauf

Betrachten wir, wie wir den Inhaltüberlauf mit Hilfe einer Eigenschaft kontrollieren können. Manchmal kommt es vor, dass wir eine feste width und height des Elements haben. Der innere Inhalt ist jedoch viel größer als der verfügbare Platz. Die overflow-Eigenschaft steuert das Verhalten des Inhalts eines Elements, wenn er die für das Element explizit festgelegten height- oder width-Werte überschreitet.

• visible - ist der Standardwert. Der Inhalt überläuft die Elementgrenzen und bleibt sichtbar;
• scroll - Der Inhalt überläuft die Elementgrenzen, und es erscheint eine Scrollleiste, die es einem Benutzer ermöglicht, sowohl vertikal als auch horizontal zu scrollen;
• hidden - Der Inhalt, der die Elementgrenzen überläuft, wird abgeschnitten und ist nicht sichtbar;
• auto - funktioniert genauso wie scroll. Allerdings erscheinen die Scrollleisten nur, wenn der Inhalt die Elementgrenzen überläuft.

Hinweis

Der überlaufende Inhalt beeinflusst nicht die Geometrie der anderen Elemente.

sichtbar

Wenn die overflow-Eigenschaft nicht gesetzt ist, ist ihr Standardwert visible. Das bedeutet, dass der Inhalt außerhalb der Grenzen des Elements angezeigt wird. Im Beispiel sind die Grenzen des Kastens in darkblue hervorgehoben, und der Kasten hat feste width- und height-Eigenschaften.

scroll

Wir können den gesamten Inhalt des Elements mit einem Scroll sehen. Lassen Sie uns das Beispiel überprüfen:

versteckt

Alle Überlaufinhalte werden verborgen, und ein Benutzer wird sie niemals sehen. Im Allgemeinen ist es nur hilfreich, wenn wir einige dekorative Effekte entwickeln müssen.