Überlaufender Inhalt

Alles in CSS ist ein Kasten. Sie können die Größe dieser Kästen durch Zuordnung von Werten wie width und height einschränken. Überlauf passiert, wenn zu viel Inhalt vorhanden ist, um in einen Kasten zu passen. CSS bietet verschiedene Werkzeuge zur Verwaltung von Überlauf. Wenn Sie tiefer in CSS-Layouts und CSS-Verfassen eintauchen, werden Sie auf mehr Überlaufsituationen stoßen.

Betrachten wir zwei Beispiele, die das Standardverhalten von CSS bei Überlauf demonstrieren.

Das erste Beispiel zeigt einen Kasten, der durch Setzen einer height eingeschränkt wurde. Der Inhalt des Kastens übersteigt den verfügbaren Raum und läuft daher über den Kasten hinaus und fällt in den darunter liegenden Absatz.

<div class="box">
  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 einem Kasten. Der Kasten ist zu klein für das Wort und daher bricht es aus dem Kasten aus.

<div class="word">Overflow</div>

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

Vielleicht fragen Sie sich, warum CSS auf so chaotische Weise arbeitet und Inhalte außerhalb ihres vorgesehenen Containers anzeigt. Warum nicht den überlaufenden Inhalt verbergen? Warum nicht die Größe des Containers anpassen, um den gesamten Inhalt aufzunehmen?

Wo immer möglich, verbirgt CSS keinen Inhalt. 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 Absende-Button auf einem Formular verschwindet und niemand das Formular ausfüllen kann, könnte dies ein großes Problem sein! Stattdessen tritt der Überlauf in CSS auf sichtbare Weise auf. So ist es wahrscheinlicher, dass Sie ein Problem bemerken. Im schlimmsten Fall wird Sie ein Website-Besucher darauf hinweisen, dass sich Inhalte überlagern.

Wenn Sie einen Kasten mit einer width oder einer height 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 das Einschränken der Blockdimension problematisch, wenn der Kasten Text enthält. Es kann mehr Text geben, als Sie beim Entwerfen der Site erwartet haben, oder der Text könnte größer sein (zum Beispiel, wenn der Nutzer die Schriftgröße erhöht hat).

Die overflow-Eigenschaft ermöglicht es Ihnen, anzugeben, wie der Browser mit überlaufenden Inhalten umgehen soll. Der Standardwert des <overflow>-Wertetyps ist visible. Mit dieser Standardeinstellung kann man den Inhalt sehen, wenn er überläuft.

Um Inhalt zu verbergen, wenn er überläuft, können Sie overflow: hidden setzen. Dies bewirkt genau das, was es sagt: es verbirgt Überlauf. Seien Sie sich bewusst, dass dadurch Inhalt unsichtbar werden kann. Sie sollten dies nur tun, wenn das Verbergen von Inhalten keine Probleme verursacht.

<div class="box">
  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 und den overflow-Wert auf visible zu setzen und dann zurück auf hidden, um zu sehen, welchen Effekt dies hat.

Stattdessen möchten Sie vielleicht Ihren Benutzern erlauben, den gesamten Inhalt durch Scrollen zu lesen? Wenn Sie overflow: scroll auf überlaufende Inhalte setzen, werden Browser mit sichtbaren Scrollleisten diese immer anzeigen - selbst wenn nicht genügend Inhalt vorhanden ist, um einen Überlauf zu verursachen. Dies bietet den Vorteil, das Layout konsistent zu halten, anstatt dass Scrollleisten je nach Inhalt im Container erscheinen oder verschwinden.

Sehen wir uns das in Aktion an. Bearbeiten Sie das folgende Beispiel, um einige Inhalte aus dem box-<div> zu entfernen. Beachten Sie, wie die Scrollleisten erhalten bleiben, auch wenn kein Scrollen erforderlich ist:

<div class="box">
  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, doch wir erhalten Scrollleisten auf beiden Achsen. Um nur auf der y-Achse zu scrollen, könnten Sie die overflow-y-Eigenschaft verwenden, indem Sie overflow-y: scroll setzen. Versuchen Sie, diese Eigenschaft im obigen Beispiel zu setzen.

Sie können das Scrollen entlang der x-Achse auch aktivieren, indem Sie overflow-x verwenden, obwohl dies keine empfohlene Methode ist, um lange Wörter unterzubringen! Wenn Sie ein langes Wort in einem kleinen Kasten haben, sollten Sie die Eigenschaften word-break oder overflow-wrap in Betracht ziehen. Außerdem können einige der in Größen von Elementen in CSS diskutierten Methoden Ihnen helfen, Kästen zu erstellen, die besser mit unterschiedlichen Inhaltsmengen skalieren.

<div class="word">Overflow</div>

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

Wie bei scroll erhalten Sie einen Scrollbalken in der Scrollrichtung, unabhängig davon, ob genügend Inhalt vorhanden ist, um einen Scrollbalken zu verursachen.

Wenn Sie nur möchten, dass Scrollleisten erscheinen, wenn mehr Inhalt vorhanden ist, als in den Kasten passt, verwenden Sie overflow: auto. Dadurch kann der Browser bestimmen, ob er Scrollleisten anzeigen soll.

Im folgenden Beispiel entfernen Sie Inhalte, bis sie in den Kasten passen. Sie sollten sehen, dass die Scrollleisten verschwinden:

<div class="box">
  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;
}

Moderne Layoutmethoden (die Sie später im CSS-Layout-Modul kennenlernen werden) verwalten den Überlauf. Sie arbeiten weitgehend ohne Annahmen oder Abhängigkeiten davon, wie viel Inhalt auf einer Webseite vorhanden sein wird.

Dies war nicht immer die Norm. In der Vergangenheit wurden einige Seiten mit Containern fester Höhe gebaut, um die Unterseiten von Kästen auszurichten. Diese Kästen hatten möglicherweise sonst keine Beziehung zueinander. Dies war fragil. Wenn Sie auf einen Kasten stoßen, bei dem sich Inhalte überlagern, werden Sie jetzt erkennen, dass Überlauf gut die Ursache dafür sein kann. Idealerweise werden Sie das Layout umstrukturieren, um nicht auf Container fester Höhe angewiesen zu sein.

Wenn Sie eine Website entwickeln, denken Sie immer an den Überlauf. Testen Sie Designs mit großen und kleinen Mengen an Inhalten. Erhöhen und verringern Sie die Schriftgröße um mindestens zwei Stufen. Stellen Sie sicher, dass Ihr CSS robust ist. Das Ändern von Überlaufwerten, um Inhalte zu verbergen oder Scrollleisten hinzuzufügen, ist einigen wenigen ausgewählten Anwendungsfällen vorbehalten (zum Beispiel, wenn Sie beabsichtigen, einen scrollenden Kasten zu haben).

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Überlauf.

Diese Lektion hat das Konzept des Überlaufs eingeführt. Sie sollten verstehen, dass CSS standardmäßig vermeidet, überlaufende Inhalte unsichtbar zu machen. Sie haben entdeckt, dass Sie den potenziellen Überlauf verwalten können und sollten auch Ihre Arbeit testen, um sicherzustellen, dass sie nicht versehentlich problematischen Überlauf verursacht.

Im nächsten Artikel werden wir uns damit befassen, wie man spezielle Seitenmerkmale wie Bilder und Formularelemente stylen kann.

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