Überlauf

Wie bereits erläutert, nimmt ein Block-Level-Element in CSS standardmäßig den gesamten horizontalen sowie den gesamten vertikalen Platz ein, den es benötigt, um in den Inhalt hinein zu passen. Was passiert jedoch, wenn wir eine vertikale Größe definieren, die nicht ausreicht, um den Inhalt aufzunehmen? Werfen wir einen Blick darauf:

<style type="text/css">
#box1 {
	width: 100px;
	height: 100px;
}
</style>

<div id="box1" style="background-color: GreenYellow;">
	Some content....
	More content...
	There's probably not enough room for it in this tiny box...
</div>

Wenn Sie dieses Beispiel ausprobieren, werden Sie bald feststellen, dass es wichtig ist: Wenn Sie für ein Element eine feste Höhe festlegen, sind Sie dafür verantwortlich, dass der Inhalt passt. Wenn dies nicht der Fall ist, fällt er einfach aus dem "Container" heraus. Offensichtlich würden Sie es in diesem Beispiel nicht bemerken, wenn es nicht die unterschiedlichen Hintergrundfarben gäbe (das grüne Kästchen auf dem weißen Hintergrund), aber es ist immer noch ein sehr reales Problem, dem Sie wahrscheinlich gegenüberstehen werden, sobald Sie versuchen, die Größe Ihrer Elemente zu begrenzen. Also, was kann man dagegen tun?

Die Überlaufeigenschaft

Mit ein wenig Hilfe von der overflow -Eigenschaft können Sie steuern, was passiert, wenn ein Element einen größeren Inhalt hat, als er tatsächlich passen kann. Es gibt mehrere mögliche Werte, und bei jedem dieser Werte verhält sich Ihr Element anders, wenn Sie entscheiden, was mit überfülltem Inhalt geschehen soll. Hier ist ein Beispiel, das es veranschaulichen wird:

<style type="text/css">
.box {
	width: 80px;
	height: 80px;
	background-color: DarkSeaGreen;
	padding: 10px;
	margin: 20px;
	float: left;
}
</style>

<div class="box" style="overflow: visible;">
	Box 1 - A box with many, many words in it, designed to cause overflow
</div>

<div class="box" style="overflow: hidden;">
	Box 2 - A box with many, many words in it, designed to cause overflow
</div>

<div class="box" style="overflow: auto;">
	Box 3 - A box with many, many words in it, designed to cause overflow
</div>

<div class="box" style="overflow: scroll;">
	Box 4 - A box with many, many words in it, designed to cause overflow
</div>

Der Überlauf hat gemäß der aktuellen Spezifikation vier mögliche Werte: Sichtbar, Verborgen, Scrollen und Automatisch. Die Standardeinstellung ist sichtbar. Dies ist das Verhalten, das wir im ersten Beispiel gesehen haben. Der Inhalt wird einfach über den Rand des Containers hinaus erweitert. Dies ist der Wert, der für das erste Feld verwendet wird. Er könnte jedoch weggelassen werden, da dies der Standardwert ist.

Für das zweite Feld verwenden wir den Wert hidden. Dadurch werden Inhalte, die über die Grenzen hinausgehen, einfach ausgeblendet und für den Endbenutzer unsichtbar. Dies kann in einigen Fällen praktisch sein, aber im Fall eines langen Texts, der nicht in ein Element mit absoluter Größe passt, würden Sie wahrscheinlich den Wert auto oder scroll bevorzugen.

Der im dritten Feld verwendete Wert auto überlässt es dem Browser, wie das Problem behoben werden soll. Die meisten Browser, zumindest Desktop-Browser, können einen Überlauf verarbeiten, indem sie bei Bedarf Bildlaufleisten hinzufügen. Dies ist sehr oft der Wert, den Sie bevorzugen, da Sie ein Element mit absoluter Größe haben und dann nur Bildlaufleisten anzeigen lassen können, wenn der Inhalt tatsächlich überläuft.

Endlich haben wir den Wert scroll. Die meisten Desktop-Browser verarbeiten diesen Wert, indem sie dem Element vertikale und/oder horizontale Bildlaufleisten hinzufügen, wenn der Inhalt überläuft. Bildlaufleisten sind häufig das, was Sie möchten. Bei diesem Wert erzwingen die meisten Browser jedoch Bildlaufleisten für Ihr Element, unabhängig davon, ob der Inhalt überläuft oder nicht. Aus diesem Grund wird in der Regel der Wert auto bevorzugt.

Zusammenfassung

Bei Elementen mit absoluter Größe treten wahrscheinlich Probleme mit überfüllten Inhalten auf. Sie können dies lösen, indem Sie die Überlaufeigenschaft verwenden, wie in den obigen Beispielen gezeigt. Sie können sie jedoch auch lösen, indem Sie relativ große Elemente verwenden, z. B. indem Sie die Größe des übergeordneten Elements entsprechend der Schriftgröße anstelle eines absoluten Werts anpassen. Dies hilft Ihnen in Fällen, in denen Ihre Elemente Text enthalten und der Benutzer die Schriftgröße im Browser ändert. Welche Lösung sehr wichtig ist, hängt jedoch von der jeweiligen Situation ab.