CSS overflow - Verhalten bei übergroßen Inhalten

Bei HTML-Elementen besteht grundsätzlich immer die Möglichkeit, dass der Inhalt zu groß ist. Das kann beispielsweise dann eintreten, wenn man dem Element über die Eigenschaften width und height eine feste Größe zugewiesen hat. Bei übergroßen Inhalten ragen diese standardmäßig aus der Box hinaus und können dadurch andere Elemente überlagern. Es gibt in CSS einige Möglichkeiten, um das Verhalten übergroßer Inhalte zu beeinflussen. Dazu zählen die folgenden Eigenschaften.

• overflow

Ab CSS3

• overflow-x
• overflow-y
• overflow-x und overflow-y
• text-overflow

Mit der Eigenschaft overflow wird das Verhalten festgelegt, wenn die Inhalte entweder vertikal oder horizontal über den Rand hinausragen. Hierbei kann man die folgenden Werte angeben.

• visible (Standardverhalten, Inhalte werden angezeigt)
• auto (Scrollbars werden nur angezeigt, wenn es notwendig ist)
• scroll (Scrollbars werden immer angezeigt, sind jedoch erst aktiv, wenn es notwendig ist)
• hidden (Hinausragende Inhalte werden versteckt bzw. abgeschnitten)
• initial (Setzt auf den Standardwert)
• inherit (Vererbt vom Elternelement)

Die Syntax ist nachfolgend anhand eines Beispiels abgebildet.

Wird für ein Element der Wert für overflow auf auto gesetzt, werden automatisch vertikale und/oder horizontale Scrollleisten nur eingeblendet, wenn es notwendig ist. Die Scrollleisten nehmen den Platz innerhalb des Elements ein, wodurch der Platz für den Inhalt verkleinert wird. Dadurch kann es passieren, dass beide Scrollleisten (vertikal und horizontal) eingeblendet werden, obwohl eine Größe (Breite oder Höhe) eigentlich genug Platz für den Inhalt bietet. Wenn beispielsweise das Element nicht breit genug ist, wird im unteren Bereich eine Scrollleiste zum horizontalen Scrollen eingeblendet. Dadurch wird gleichzeitig die Höhe verringert und das kann wiederum dafür sorgen, dass im rechten Bereich die Scrollleiste zum vertikalen Scrollen eingeblendet wird.

Wenn man bei einem Element den Wert für overflow auf scroll setzt, dann werden immer horizontale und vertikale Scrollleisten eingeblendet. Diese bleiben jedoch inaktiv, wenn sie nicht notwendig sind. Erst wenn die Breite oder Höhe es erforderlich macht, da der Inhalt zu groß ist, werden sie aktiviert und man kann die Scrollleiste benutzen.

Wenn man bei einem Element den Wert für overflow auf hidden setzt, dann werden die aus dem Element hinausragenden Inhalte nicht angezeigt bzw. abgeschnitten.