CSS overflow / text-overflow

CSS overflow / text-overflow

Wenn Elemente zu groß sind, um in den umfassenden Block zu passen, fließen ihr Inhalt ohne jegliche Rücksicht über den umfassenden Block hinaus. CSS overflow verbirgt überlaufende Teile des Elements, so dass der verbleibende Teil in den umfassenden Block passt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Wenn der Inhalt überfließt

Wenn für ein Element keine Höhe oder Beite angegeben ist, legt der Inhalt Höhe und Breite fest. Die Höhe eines Blocks wächst mit dem Text und Bildern.

Ist für einen Block keine Höhe angegeben, dann dehnt der Inhalt die Höhe, bis er passt. Damit das Layout durch unvorhersehbare Inhalte nicht bricht, wird der umfassende Block durch overflow: hidden begrenzt.

Die abgeschnittenen Teile des Elements werden versteckt oder dem Benutzer werden Scrollleisten angeboten, die den verborgenen Inhalt sichtbar machen.

#gallery { 
	display: flex;
	max-width: 600px;
	overflow: hidden;
}

oder in diesem Beispiel einer scrollenden Galerie

#gallery {
	display: flex;
	overflow-x: scroll;
	max-width: 600px;
	margin: auto;
}

overflow-x, overflow-y

Die einfache Eigenschaft overflow kann weiter detailliert werden.

overflow-x
gibt an, ob überbreiter Inhalt beschnitten werden und entweder nicht angezeigt oder nur durch Scrollen angezeigt werden soll.
overflow-y
beschneidet überlangen Inhalt und zeigt den Überstand gar nicht oder nur beim Scrollen.

Inzwischen ist die Scrollleiste oder der Rollbalken (Mac OS-Terminologie) mit CSS scrollbar eine flexible Lösung für ein individuelles Design. Für Mac OS ist sie schon fast unersetzlich, denn in den neueren Version zeigt Mac OS Scrollleisten erst an, wenn der Besucher die Scrollmöglichkeit schon selber entdeckt hat.

CSS overflow:hidden, overflow: scroll

Die Scrollleisten sind in vielen Browsern nicht (dauerhaft) sichtbar. Wenn es wichtig ist, muss dem Benutzer die Existenz der Scrollleisten ausdrücklich bekannt gemacht werden. Tabellen sind eine Ausnahme: Da zeigen die Browser, dass dort noch ein Teil der Tabelle verborgen ist.

Beispiel aus Responsive Tabellen

Art. Nr. Beschreibung Bereitstellung VE Preis in €/VE
1 VE ab 10 VE
 
VC0800050 0,7ml Klarglas, flacher Boden
40 x 7mm
Mittwochs 1000 15,10 € 13,50 € Beispiel: HTML table mit col und colgroup
VC0801050 0,7ml Braunglas, flacher Boden
40 x 7mm
ab 2. Quartal 2023 1000 15,90 € 14,50 €
VC0800735 0,3ml Klarglas, runder Boden
31,5 x 5,5mm
ganzjährig 2500 17,00 € 14,00 € Beispiel: HTML table mit col und colgroup
VC0800730 0,3ml Klarglas, konisch
31,5 x 5,5mm
Montags und Mittwochs 3000 16,60 € 13,80 €
.wrapper {
	width: 80%;
	overflow: scroll;
}

Die Inhalte werden von der oberen linke Ecke aus angezeigt und nach links abgeschnitten.

overflow
overflow bestimmt, ob ein übergroßer Inhalt innerhalb eines Elements beschnitten oder sichtbar sein soll.
Werte
auto | hidden | scroll | visible | inherit

auto veranlasst den Browser, Scrollbalken anzubieten, damit der Benutzer den Rest des Elements betrachten kann.  

hidden gibt vor, dass nur der beschnittene Teil des übergroßen Elements sichtbar ist, so dass es vollkommen innerhalb des umfassenden Containers dargestellt wird und keine Scrollbalken eingespielt werden. 

scroll führt dazu, dass ein übergroßes Element beschnitten wird und Scrollbalken eingespielt werden, über die der Rest des Elements betrachtet werden kann. 

visible ist die Vorgabe und erzwingt, dass ein übergroßes Element nicht beschnitten wird. Das vollständige Element wird dargestellt, obwohl es sich über die Grenzen des umfassenden Blocks hinaus erstreckt. Wenn overflow:visible eingesetzt wird, hat die CSS-Eigenschaft clip keine Auswirkung auf die Darstellung des Elements.

overflow Beispiele

Während Tabellen pflichtbewußt mit einer Scrollleiste darauf hinweisen, dass hier mehr zu holen ist, weisen andere Elemente auch bei overflow: scroll nicht auf den möglichen Überfluss hin.

Beispiele mit

  1. overflow: scroll;
  2. overflow: hidden;
  3. overflow: visible;
<div style="overflow: scroll; height: 200px; width: 180px; …">
  <img src="bild.gif" … />
  <p>Aliquam tempus ipsum … </p>
</div>
overflow: scroll
overflow: scroll

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.

overflow: scroll
overflow: hidden

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.

overflow: scroll
overflow: visible

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.

Und wieder: Bei overflow : scroll muss dem Benutzer die Scroll-Möglichkeit klar gemacht werden, sonst entgeht ihm der weitere Inhalt schnell.