Bei der Darstellung von langen Wörtern oder Zeichenketten erfolgt in der Regel kein automatischer Zeilenumbruch. Dies kann vor allem in Tabellen problematisch sein, entweder werden die Wörter abgeschnitten und sind nicht mehr lesbar oder das Layout der Tabelle wird "zerschossen". Doch es gibt Abhilfe:
Mittels der beiden folgenden CSS3-Regeln kann ein Zeilenumbruch erzwungen werden, falls das Wort oder die Zeichenkette die vorgegebene Tabellenbreite übersteigen sollte.
word-break:break-all;
word-wrap:break-word;
Beispiel: Eine Tabelle mit 300 Pixel und langer Zeichenkette, die Breite der Tabelle wird nicht eingehalten und das Layout beeinträchtigt.
|← Tabelle mit 300 Pixel fester Breite →|
| wassolldasdennschonwiederwarumwirddiesertextnichtumgebrochen? |
Und mit style="word-break:break-all;word-wrap:break-word;" im table- oder td-Attribut. Die Tabellenbreite wird eingehalten und die Zeichenkette umgebrochen:
|← Tabelle mit 300 Pixel fester Breite →|
| wassolldasdennschonwiederwarumwirddiesertextnichtumgebrochen? |
Kleine Einschränkung: Sehr alte Browser ohne CSS3-Unterstützung ignorieren die oben genannten CSS-Regeln.
WinFuture News
