CSS, HTML und Javascript mit {stil}

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.

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.

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

HTML table responsive

overflow:hidden bietet ein einfaches Verfahren, um übergroße Tabellen auch für die kleinen Monitore von mobilen Geräten ohne Kürzung des Inhalts anzuzeigen.

Es gibt viele raffinierte Verfahren für responsive Tabellen:

  • Die Zahl der Spalten auf kleinen Monitoren reduzieren und nur die wichtigsten Spalten anzeigen,
  • Einsatz von Grafiken – z.B. Tortendiagrammen – anstelle von Tabellen,
  • die Tabelle umdrehen, Kopfzeilen auf die Seite bringen und die Spalten scrollen,
  • die komplette Tabelle mit overflow: scroll scrollen lassen.

Die letzte Lösung ist eine der stabilsten und gleichzeitig einfachsten Lösungen. Am besten bringt man Tabellen in einem div-Block unter, der von einfachen CSS-Regeln im Raster gehalten wird.

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

Dem Benutzer muss deutlich gemacht werden, dass die Tabelle überbreit ist und er den Inhalt scrollen kann, denn viele Browser zeigen mit overflow: auto die Scrollleisten nicht automatisch.

Scrollleisten sichtbar machen
.tableresp::-webkit-scrollbar{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
}

.tableresp::-webkit-scrollbar-thumb{
	border-radius: 8px;
	border: 3px solid #fff;
	background-color: rgba(0, 0, 0, .3);
}