• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter

Überlauf tritt auf, wenn es zu viel Inhalt gibt, um in ein Element-Box zu passen. In dieser Lektion lernen Sie, wie Sie Überlauf mithilfe von CSS verwalten können.

Was ist Überlauf?

Alles in CSS ist eine Box. Sie können die Größe dieser Boxen einschränken, indem Sie Werte wiewidth undheight zuweisen.Überlauf entsteht, wenn zu viel Inhalt in eine Box passt. CSS bietet verschiedene Werkzeuge zur Verwaltung von Überlauf. Je weiter Sie mit CSS Layouts und dem Schreiben von CSS fortschreiten, desto häufiger werden Sie auf Überlaufsituationen stoßen.

CSS versucht "Datenverlust" zu vermeiden

Lassen Sie uns zwei Beispiele betrachten, die das Standardverhalten von CSS beim Auftreten von Überlauf demonstrieren.

Das erste Beispiel zeigt eine Box, die durch die Einstellung einerheight eingeschränkt wurde. Der Inhalt der Box überschreitet den verfügbaren Raum, daher überläuft er die Box und fällt in den darunterliegenden Absatz.

<div>  This box has a height and a width. This means that if there is too much  content to be displayed within the assigned height, there will be an overflow  situation. If overflow is set to hidden then any overflow will not be visible.</div><p>This content is outside of the box.</p>

.box {  border: 1px solid #333333;  width: 250px;  height: 100px;}

Das zweite Beispiel zeigt ein Wort in einer Box. Die Box wurde zu klein gemacht, um das Wort aufzunehmen, und so bricht es aus der Box heraus.

<div>Overflow</div>

.word {  border: 1px solid #333333;  width: 100px;  font-size: 250%;}

Sie fragen sich vielleicht, warum CSS auf so chaotische Weise funktioniert und Inhalte außerhalb ihres beabsichtigten Containers anzeigt. Warum nicht überfließende Inhalte verbergen? Warum nicht die Größe des Containers anpassen, um alle Inhalte aufzunehmen?

Wann immer es möglich ist, verbirgt CSS keine Inhalte. Dies würde zu Datenverlust führen. Das Problem mit Datenverlust ist, dass Sie oder Besucher Ihrer Website es möglicherweise nicht bemerken. Wenn der Senden-Button eines Formulars verschwindet und niemand das Formular ausfüllen kann, könnte dies ein großes Problem sein! Stattdessen tritt Überlauf bei CSS auf sichtbare Weise auf. Sie werden wahrscheinlicher sehen, dass ein Problem vorliegt. Im schlimmsten Fall wird ein Seitenbesucher Sie darauf hinweisen, dass sich Inhalte überlappen.

Wenn Sie eine Box mit einerwidth oder einerheight einschränken, vertraut CSS darauf, dass Sie wissen, was Sie tun. CSS geht davon aus, dass Sie das Potenzial für Überlauf verwalten. Im Allgemeinen ist es problematisch, die Blockdimension einzuschränken, wenn die Box Text enthält. Es könnte mehr Text geben, als Sie beim Entwerfen der Seite erwartet haben, oder der Text könnte größer sein (zum Beispiel, wenn der Benutzer seine Schriftgröße erhöht hat).

Die overflow-Eigenschaft

Dieoverflow-Eigenschaft ermöglicht es Ihnen, festzulegen, wie der Browser mit überfließenden Inhalten umgehen soll. Der Standardwert des<overflow>-Werttyps istvisible. Mit dieser Standardeinstellung kann man Inhalte sehen, wenn sie überlaufen.

Verbergen von überfließenden Inhalten

Um Inhalte bei Überlauf zu verbergen, können Sieoverflow: hidden setzen. Dies tut genau das, was es sagt: es verbirgt Überlauf. Seien Sie sich bewusst, dass dies einige Inhalte unsichtbar machen kann. Sie sollten dies nur tun, wenn das Verbergen von Inhalten keine Probleme verursacht.

<div>  This box has a height and a width. This means that if there is too much  content to be displayed within the assigned height, there will be an overflow  situation. If overflow is set to hidden then any overflow will not be visible.</div><p>This content is outside of the box.</p>

.box {  border: 1px solid #333333;  width: 250px;  height: 100px;  overflow: hidden;}

Versuchen Sie das obige Beispiel zu bearbeiten, um denoverflow-Wert aufvisible und dann zurück aufhidden zu setzen, um zu sehen, welche Wirkung dies hat.

Scrollen von überfließenden Inhalten

Vielleicht möchten Sie Ihren Benutzern lieber erlauben, den Inhalt zu scrollen, um alles zu lesen? Wenn Sieoverflow: scroll auf überfließendem Inhalt setzen, werden Browser mit sichtbaren Scrollleisten diese immer anzeigen—auch wenn nicht genug Inhalt vorhanden ist, um überzulaufen. Dies bietet den Vorteil, das Layout konsistent zu halten, anstatt dass Scrollleisten je nach Menge des Inhalts im Container erscheinen oder verschwinden.

Sehen wir uns das in Aktion an. Bearbeiten Sie das folgende Beispiel, um etwas Inhalt aus dembox-<div> zu entfernen. Beachten Sie, wie die Scrollleisten bleiben, auch wenn kein Scrollen notwendig ist:

<div>  This box has a height and a width. This means that if there is too much  content to be displayed within the assigned height, there will be an overflow  situation. If overflow is set to hidden then any overflow will not be visible.</div><p>This content is outside of the box.</p>

.box {  border: 1px solid #333333;  width: 250px;  height: 100px;  overflow: scroll;}

Im obigen Beispiel müssen wir nur auf der y-Achse scrollen, dennoch erhalten wir Scrollleisten auf beiden Achsen. Um nur auf der y-Achse zu scrollen, könnten Sie dieoverflow-y-Eigenschaft verwenden, indem Sieoverflow-y: scroll setzen. Versuchen Sie, diese Eigenschaft im obigen Beispiel zu setzen.

Sie können auch das Scrollen entlang der x-Achse aktivieren, indem Sieoverflow-x verwenden, obwohl dies keine empfohlene Methode ist, um lange Wörter unterzubringen! Wenn Sie ein langes Wort in einer kleinen Box haben, sollten Sie die Eigenschaftenword-break oderoverflow-wrap in Betracht ziehen. Darüber hinaus können einige der inGrößenanpassung von Elementen in CSS besprochenen Methoden Ihnen helfen, Boxen zu erstellen, die besser mit unterschiedlichen Inhaltsmengen skalieren.

<div>Overflow</div>

.word {  border: 5px solid #333333;  width: 100px;  font-size: 250%;  overflow-x: scroll;}

Wie beiscroll erhalten Sie eine Scrollleiste in der Scrollrichtung, egal ob genug Inhalt vorhanden ist, um eine Scrollleiste zu verursachen oder nicht.

Scrollleisten nur anzeigen, wenn nötig

Wenn Sie möchten, dass Scrollleisten nur dann erscheinen, wenn mehr Inhalt vorhanden ist, als in die Box passt, verwenden Sieoverflow: auto. Dies ermöglicht es dem Browser zu bestimmen, ob Scrollleisten angezeigt werden sollten.

Im folgenden Beispiel entfernen Sie Inhalt, bis er in die Box passt. Sie sollten sehen, dass die Scrollleisten verschwinden:

<div>  This box has a height and a width. This means that if there is too much  content to be displayed within the assigned height, there will be an overflow  situation. If overflow is set to hidden then any overflow will not be visible.</div><p>This content is outside of the box.</p>

.box {  border: 1px solid #333333;  width: 250px;  height: 100px;  overflow: auto;}

Unerwünschter Überlauf im Webdesign

Moderne Layoutmethoden (die Sie später imCSS-Layout Modul kennenlernen werden) verwalten Überlauf. Sie funktionieren größtenteils ohne Annahmen oder Abhängigkeiten von der Menge an Inhalten, die auf einer Webseite vorhanden sein werden.

Das war nicht immer die Norm. In der Vergangenheit wurden einige Websites mit Containern fester Höhe erstellt, um Boxböden auszurichten. Diese Boxen könnten sonst keinen Bezug zueinander haben. Das war zerbrechlich. Wenn Sie auf eine Box stoßen, bei der sich Inhalte über andere Inhalte überlagern, erkennen Sie jetzt, dass Überlauf durchaus die Ursache dafür sein kann. Idealerweise werden Sie das Layout so umgestalten, dass es nicht auf Containern fester Höhe basiert.

Beim Entwickeln einer Seite sollten Sie immer den Überlauf im Auge behalten. Testen Sie Designs mit großen und kleinen Mengen an Inhalten. Erhöhen und verringern Sie die Schriftgrößen um mindestens zwei Schritte. Stellen Sie sicher, dass Ihr CSS robust ist. Das Ändern von Überlaufwerten, um Inhalte zu verbergen oder Scrollleisten hinzuzufügen, ist auf wenige ausgewählte Anwendungsfälle beschränkt (zum Beispiel, wenn Sie beabsichtigen, eine scrollbare Box zu verwenden).

Zusammenfassung

Diese Lektion führte das Konzept des Überlaufs ein. Sie sollten verstehen, dass CSS standardmäßig vermeidet, überlaufende Inhalte unsichtbar zu machen. Sie haben herausgefunden, dass Sie potenziellen Überlauf verwalten können und sollten auch sicherstellen, dass Ihre Arbeit keine versehentlichen Problemüberläufe verursacht.

Im nächsten Artikel geben wir Ihnen einige Tests, mit denen Sie überprüfen können, wie gut Sie die Informationen, die wir über Überlauf bereitgestellt haben, verstanden und behalten haben.

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter