Wenn man einen Div-Container mit einer definierten Breite hat, oder wenn man ein Responsive Design auf einem kleinen Bildschirm betrachtet, kann es vorkommen, dass eine lange Zeichenkette ohne Leerzeichen dazu führt, dass der Text aus dem Div-Container heraus läuft. Um das zu verhindern, hilft die CSS-Eigenschaft overflow.
Beispiel:
.mydivcontainer
{
width: 200px;
overflow: hidden;
}
CSS-Eigenschaft ‚overflow‘
Der CSS-Eigenschaften overflow kann man folgende Werte mitgeben:
- visible; Inhalt bleibt komplett sichtbar und überschreibt Div
- hidden; Inhalt wird am Ende des Div-Bereichs unsichtbar
- scroll; Inhalt bleibt innerhalb des Divs und wird gescrollt
- auto; Der Web-Browser erzeugt automatisch Scrollbalken
Ein Umbruch der Zeichenkette ist nur möglich, wenn Leerzeichen in dem Wort oder der Zeichenkette enthalten sind.
CSS-Eigenschaft ‚word-wrap‘
Alternativ dazu, wenn man zum Beispiel keinen Scrollbereich haben möchte, kann man die Eigenschaft word-wrap verwenden.
/* Keyword values */
word-wrap: normal; word-wrap: break-word;
/* Global values */
word-wrap: inherit; word-wrap: initial; word-wrap: unset;
So wird ein Umbruch auch mitten in einem Wort erzeugt. Das kann natürlich dazu führen, dass die Lesbarkeit des Textes beeinträchtigt wird. Aber das dürfte besser sein, als ein Break im Design.
Achtung: Die ursprünglich proprietäre Erweiterung word-wrap
von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in overflow-wrap
umbenannt. word-wrap
wird jetzt als „alternativer Name“ für overflow-wrap
angesehen. Aktuelle Browser unterstützen beide Schreibweisen.
Last but not least kann man zur Vermeidung solcher Probleme auch mit der PHP-Funktion wordwrap arbeiten.
Schreibe einen Kommentar