Die Eigenschaft overflow

Die Eigenschaft overflow weist den Browser an, wie mit Inhalt (Text, Bilder, andere Blöcke) umzugehen ist, der über die Grenzen des Blocks hinausragt (über seine Breite oder Höhe). Der Browser kann den überlaufenden Teil verstecken, Bildlaufleisten hinzufügen oder nichts tun (es so belassen, wie es ist - über die Grenzen hinausragend).

Syntax

selektor {
	overflow: hidden | scroll | auto | visible;
}

Werte

Wert	Beschreibung
`hidden`	Versteckt den Inhalt, der über die Blockgrenzen hinausragt.
`scroll`	Fügt Bildlaufleisten hinzu, und zwar immer, auch wenn nichts überläuft (in diesem Fall sind sie inaktiv).
`auto`	Fügt Bildlaufleisten bei Bedarf hinzu: Wenn der Inhalt nicht passt - erscheinen sie, wenn alles passt - gibt es sie nicht.
`visible`	Versteckt den Inhalt nicht, der über die Blockgrenzen hinausragt.

Standardwert: visible.

Beispiel . Wert visible

In diesem Beispiel passt das sehr lange Wort nicht in den Container und wird über seine Grenzen hinausragen. Es findet kein Abschneiden statt:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Beispiel . Wert visible

Jetzt ist nicht nur die Breite, sondern auch die Höhe begrenzt (der Text wird den Block auch in der Höhe überragen):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Beispiel . Wert hidden

Jetzt wird alles, was über die Containergrenzen hinausragt, einfach abgeschnitten (auch in der Höhe). Achten Sie darauf, dass das Abschneiden in der Höhe nur dann erfolgt, wenn diese explizit angegeben ist. Andernfalls erweitert der Text den Container in der Höhe - und es findet kein Abschneiden statt:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Beispiel . Wert scroll

Beim Wert scroll sind Bildlaufleisten immer vorhanden, selbst wenn nichts überläuft (in diesem Fall sind sie inaktiv). Im Moment ragt der Text weder in der Breite noch in der Höhe heraus, aber die Bildlaufleisten sind trotzdem da (inaktiv):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Beispiel . Wert auto

Beim Wert auto werden Bildlaufleisten nur hinzugefügt, wenn der Inhalt über den Container hinausragt. Im Moment gibt es sie nicht, da alles passt:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Beispiel . Wert auto

Jetzt schränken wir die Breite ein - eine horizontale Bildlaufleiste erscheint:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Siehe auch

die Eigenschaft word-break,
die Buchstaben eines langen Wortes in eine neue Zeile umbricht
die Eigenschaft overflow-wrap,
die Buchstaben eines langen Wortes in eine neue Zeile umbricht
die Eigenschaft overflow-x,
die horizontal überlaufende Teile abschneidet
die Eigenschaft overflow-y,
die vertikal überlaufende Teile abschneidet