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.

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.

CSS overflow

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

elem { 
  height: 100px;
  overflow: hidden;
}

oder

elem { 
  height: 100px;
  overflow: scroll;
}

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.

CSS overflow:hidden, overflow: scroll

Die Scrollleisten sind in den meisten Browsern nicht (dauerhaft) sichtbar. Wenn es wichtig ist, muss dem Benutzer die Existenz der Scrollleisten ausdrücklich bekannt gemacht werden.

overflow-hidden
icon vertical scroll
<style>
.stripe img {width: 450px; height:255px}
.stripe {
  width: 225px;
  height:255px;
  overflow-x : scroll;
  overflow-y : hidden;
}
</style>

<div class="stripe">
<img src="large-image.png" alt="Inhalt scrollen">
</div>

Die Inhalte werden von der oberen linke Ecke aus angezeigt und nach links und nach unten 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

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.

icon vertical scroll