CSS overflow / text-overflow

CSS overflow / text-overflow Text und Bilder beschneiden, wenn sie zu groß sind

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.

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

CSS overflow:hidden, overflow: scroll

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

<div class="stripe">
<img src="overflow-hidden.svg" alt="overflow-hidden">
</div>

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.

Die Inhalte werden von der oberen linke Ecke aus angezeigt und nach links und nach unten abgeschnitten. Die verwandte CSS-Eigenschaft clip legt fest, welche Teile des übergroßen Elements sichtbar sein sollen.

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.

CSS3 text-overflow

overflow-hidden beschneidet auch Texte. Damit der Leser erkennt, dass ein Text gekürzt ist, kann im Stylesheet zusätzlich zu overflow: hidden die Eigenschaft text-overflow: ellipsis notiert werden.

text-overflow kürzt einen Text, der über die Maße seines Containers reicht. Der Text wird abgeschnitten und als Zeichen für die Kürzung setzen die Browser ein Zeichen, z.B. drei Punkte.

text-overflow kürzt einen Text, der über die Maße seines Containers reicht. Der Text wird abgeschnitten und als Zeichen für die Kürzung setzen die Browser ein Zeichen, z.B. drei Punkte.
p { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

Wenn die Eigenschaft white-space : nowrap fehlt, wird der vollständige Text angezeigt, aber der Browser kürzt überlange Wörter und das Layout steht.

Wenn wieder einmal der Dampfschifffahrtskapitänsmützenüberzugabzugshalter fehlt, kann in der Dampfschiffahrtsvorstandssitzung keine Empfehlung ausgesprochen werden.

p { 
    overflow: hidden;
    text-overflow:ellipsis;
}

text-overflow wird von allen Browser unterstützt, auch von älteren Versionen von IE

CSS overflow / text-overflow overflow