Betrachten wir, wie sich das Überlaufen von Inhalten mit Hilfe einer einzigen Eigenschaft steuern lässt. Es kommt gelegentlich vor, dass ein Element eine feste width und height besitzt, der darin enthaltene Inhalt jedoch deutlich größer ist als der verfügbare Platz. Die Eigenschaft overflow steuert das Verhalten des Inhalts eines Elements, wenn dieser die explizit gesetzten Werte für height oder width überschreitet.

overflow: visible | scroll | hidden | auto

• visible – Standardwert. Der Inhalt überschreitet die Elementgrenzen und bleibt sichtbar;
• scroll – Der Inhalt überschreitet die Elementgrenzen, und es erscheint eine Bildlaufleiste, die vertikales und horizontales Scrollen ermöglicht;
• hidden – Über den Rand des Elements hinausragender Inhalt wird abgeschnitten und ist nicht sichtbar;
• auto – Funktioniert wie scroll. Allerdings erscheinen die Bildlaufleisten nur, wenn der Inhalt die Elementgrenzen tatsächlich überschreitet.

Hinweis

Überlaufender Inhalt beeinflusst nicht die Geometrie anderer Elemente.

visible

Wenn die Eigenschaft overflow nicht gesetzt ist, lautet ihr Standardwert visible. Das bedeutet, dass der Inhalt außerhalb der Ränder des Elements angezeigt wird. Im Beispiel sind die Ränder der Box in darkblue hervorgehoben, und die Box verfügt über feste Eigenschaften für width und height.

scroll

Der gesamte Inhalt des Elements kann mit einer Bildlaufleiste angezeigt werden. Siehe folgendes Beispiel:

hidden

Alle überlaufenden Inhalte werden ausgeblendet und sind für den Benutzer nicht sichtbar. In der Regel ist dies nur nützlich, wenn dekorative Effekte entwickelt werden sollen.