Überlauf
CSS-Eigenschaft „overflow“
Mit der CSS-Eigenschaft „overflow“ kann definiert werden, wie der überstehende Inhalt eines Elements behandelt wird. Meist passiert ein Überlauf, wenn der Text zu groß für sein Container-Element („p“ oder „div“) ist. Dabei können folgende Werte verwendet werden:
- visible: Überstehender Inhalt wird auch außerhalb des Container-Elements angezeigt
- hidden: Überstehender Inhalt wird abgeschnitten
- scroll: Überstehender Inhalt wird abgeschnitten und Scrollbalken werden eingeblendet
- auto: Überstehender Inhalt wird abgeschnitten und Scrollbalken werden nur eingeblendet, wenn erforderlich
Mit dem Wert „visible“ kann der überstehende Inhalt eines Elements angezeigt werden:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i1bee0a07f5e744c8/version/1487085329/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i6ad09d55b7ccdca3/version/1487085346/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ifd1f05ecc1621c92/version/1487085363/image.png)
Mit dem Wert „hidden“ kann der überstehenden Inhalt eines Elements abgeschnitten werden:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ia5763914afe51457/version/1487085530/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i79d6647584dc1895/version/1487085547/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i565008aa87ef0c2a/version/1487085559/image.png)
Mit dem Wert „scroll“ kann der überstehende Inhalt eines Elements abgeschnitten und ein Scrollbalken eingeblendet werden:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i66d13951f70c0ab9/version/1487085664/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i5cecce9ab181d90d/version/1487085680/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ic443ae3cecbd66e0/version/1487085694/image.png)
Mit dem Wert „auto“ kann der überstehende Inhalt eines Elements abgeschnitten und ein Scrollbalken automatisch, wenn erforderlich, eingeblendet werden:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/iaaeda4e43471e7d5/version/1487085795/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i5360330fbf500d34/version/1487085811/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i9acc581fd0f2913a/version/1487085827/image.png)
CSS-Eigenschaften „overflow-x“ und „overflow-y“
Mit den CSS-Eigenschaften „overflow-x“ und „overflow-y“ kann der Überlauf in horizontaler („x“) und vertikaler („y“) Richtung getrennt definiert werden:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i988895569a7f05ba/version/1487091508/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/if139f61eb186c046/version/1487091541/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i2e28c9f35cfc3d29/version/1487091581/image.png)
Abschlussübung
Als Abschlussübung kannst du folgende Beispielseite erstellen, bei der die Bilder einer Bildergalerie horizontal und einer anderen Bildergalerie vertikal gescrollt werden können:
![](https://image.jimcdn.com/app/cms/image/transf/dimension=670x10000:format=png/path/s834d64c225dfb243/image/i02212f3a02e26055/version/1487194494/image.png)
Gehe dabei folgendermaßen vor:
- Ordne die sechs Bilder jeweils hintereinander in zwei Container-Elementen („div“) an
- Vergebe für die „div“-Elemente jeweils eine feste Höhe und Breite sowie eine Hintergrundfarbe und einen Rahmen
- Verwende die Eigenschaften „overflow-x“ und „overflow-y“, um für das erste Container-Element nur in horizontaler Richtung und für das zweite nur in vertikaler Richtung einen Scrollbalken einzublenden
- Verwende zusätzlich für das erste Container-Element die Definition „white-space: nowrap;“, damit die Bilder nicht am Ende der Seite auf die nächste Zeile umgebrochen werden
Hier kannst du die Bilder für das Beispiel herunterladen:
Die Lösung kannst du dir hier herunterladen: