Die overflow-Eigenschaft gibt an ob der Inhalt abgeschnitten werden soll oder Bildlaufleisten eingeblendet werden sollen
für Inhalte die zu gross sind um in ein definiertes Areal zu passen.
Die overflow-Eigenschaft kann folgende Werte haben:
visible. Der Überlauf wird nicht abgeschnitten. Der Inhalt wird ausserhalb der Element-Box dargestellt.
hidden. Der Überlauf ist abgeschnitten und der Rest des Inhalt nicht sichtbar:
scroll. Der Überlauf ist abgeschnitten und eine Bildlaufleiste wird eingeblendet um den restlichen Inhalt anzuzeigen
auto, aber es werden Bildlaufleisten nur hinzugefügt wenn nötig.
Bemerke: Die overflow-Eigenschaft funktioniert nur bei block-Elementen mit einer definierten Höhe.
<!DOCTYPE html>
<html>
<head>
<style>
main {
background-color: dodgerblue;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Überlauf</h2>
<p>Bei Vorlage,der Überlauf(overflow)ist sichtbar, bedeutet der Inhalt wird nicht abgeschnitten und der Rest des Inhalt wird ausserhalb der Element-Box dargestellt:</p>
<main>Du kannst die overflow-Eigenschaft verwenden um bessere Kontrolle über das Layout zu haben. Die overflow-Eigenschaft definiert was passieren soll mit dem Inhalt der zu gross für eine Element-Box ist.</main>
</body>
</html>
Mit dem hidden-Wert, der Überlauf ist abgeschnitten und der Rest des Inhalt nicht sichtbar:
<!DOCTYPE html>
<html>
<head>
<style>
main {
background-color: dodgerblue;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Überlauf</h2>
<p>Setze den Wert auf hidden, bedeutet der Inhalt wird abgeschnitten und der Rest des Inhalt wird nicht angezeigt in der Element-Box:</p>
<main>Du kannst die overflow-Eigenschaft verwenden um bessere Kontrolle über das Layout zu haben.Die overflow-Eigenschaft definiert was passieren soll mit dem Inhalt der zu gross für eine Element-Box ist.</main>
</body>
</html>
Setze der Wert auf scroll, der Überlauf ist abgeschnitten und eine Bildlaufleiste wird eingeblendet um den restlichen Inhalt anzuzeigen.
Bemerke es wird horizontal / vertikal eine Bildlaufleiste hinzufügen (sogar wenn es nicht nötig ist):
<!DOCTYPE html>
<html>
<head>
<style>
main {
background-color: dodgerblue;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>CSS Überlauf</h2>
<p>Denn Eigenschaft-Wert auf scroll gesetzt, bedeutet der Inhalt wird abgeschnitten und es werden Bildlaufleisten(scrollbars) eingeblendet:</p>
<main>Du kannst die overflow-Eigenschaft verwenden um bessere Kontrolle über das Layout zu haben. Die overflow-Eigenschaft definiert was passieren soll mit dem Inhalt der zu gross für eine Element-Box ist.</main>
</body>
</html>
Der auto-Wert ist ähnlich wie scroll, aber es fügt Bildlaufleisten(scrollbars) nur ein wenn nötig:
<!DOCTYPE html>
<html>
<head>
<style>
main {
background-color: dodgerblue;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: auto;
}
</style>
</head>
<body>
<h2>CSS Überlauf</h2>
<p>Denn Eigenschaft-Wert auf auto gesetzt, bedeutet der Inhalt wird abgeschnitten und es werden Bildlaufleisten(scrollbars) eingeblendet wenn nötig:</p>
<main>Du kannst die overflow-Eigenschaft verwenden um bessere Kontrolle über das Layout zu haben. Die overflow-Eigenschaft definiert was passieren soll mit dem Inhalt der zu gross für eine Element-Box ist.</main>
</body>
</html>
Die overflow-x und overflow-y Eigenschaften gibt an wie der Überlauf des Inhaltes.
horizontal oder vertikal angezeigt werden soll (oder beides):
overflow-x gibt an wie der Überlauf auf der horizontalen Achse angezeigt werden soll.
overflow-y gibt an wie der Überlauf auf der vertikalen Achse angezeigt werden soll.
<!DOCTYPE html>
<html>
<head>
<style>
main {
background-color: dodgerblue;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>CSS Überlauf</h2>
<p>overflow-x gibt an wie der Überlauf auf der horizontalen Achse angezeigt werden soll.</p>
<p>overflow-y gibt an wie der Überlauf auf der vertikalen Achse angezeigt werden soll.</p>
<main>Du kannst die overflow-Eigenschaft verwenden um bessere Kontrolle über das Layout zu haben. Die overflow-Eigenschaft definiert was passieren soll mit dem Inhalt der zu gross für eine Element-Box ist.</main>
