CSS word-wrap – Zeilenumbruch

Lange Zeichenfolgen

Damit das Layout nicht aus dem Ruder läuft (besonders interessant für lange URLs, Kommentare, schmale Sidebars): Bei Bandwurmwörtern schützen die Browser das Layout durch eine automatische Trennung bei Bindestrichen. Aber ohne besondere Vorsorge gibt es keine automatische Silbentrennung auf Webseiten. Wenn die Zeilen lang genug sind, kommt der Flattersatz auch recht gut mit moderaten Wortlängen zurecht.

Aber wenn die Spalten schmal sind und auf den kleinen Monitoren mobiler Geräte hilft die Trennung bei Leerzeichen, Bindestrichen und Satzzeichen nicht unbedingt. Typisches Beispiel ist eine URL, die in den Text kopiert wird:

https://www.amazon.de/EinFach-Deutsch-Textausgaben-Räubergeschichten-Gymnasiale/dp/314022284X/ref=sr_1_2?s=books&ie=UTF8&qid=1485945468&sr=1-2&keywords=schiller+die+räuber

word-wrap: break-word;

normal
break-word lange Wörter am rechten Ende des Blocks umbrechen
break-all jedes Wort auf eine neue Zeile umbrechen
keep-all Chinesisch, Japanisch und Koreanisch wird nicht umgebrochen
unset
inherit
initial

IE 11, Firefox, Safari, Chrome – jeder Browser fügt den Zeilenumbruch bei break-word individuell ein. IE11 und Firefox trennen alles, was den Rand des Block erreicht. Safari trennt nur die Wörter, die breiter als der umfassende Block sind.

word-wrap für pre-Tags

Text innerhalb von pre-Tags wird nie automatisch umgebrochen. Wenn der Text zu lang wird, bricht das Layout und auf schmalen Monitoren erscheint eine horizontale Scrollleiste.

document.querySelector("#b1").addEventListener ("click", function (evt){
   b1.classList.toggle ("red");
});

Wenn Elemente zu breit für den Viewport mobiler Geräte und für das Browserfenster werden, lässt sich die Seite nach rechts scrollen und schwimmt.

word-wrap ist eine Möglichkeit, sicher zu stellen, dass lange Texte in pre-Tags nicht überlaufen. Alternativen: Wenn die Gefahr besteht, dass lange Texte oder breite Bilder ihren Block überschreiten, eine maximale Breite angeben und den Überlauf mit CSS overflow / text-overflow scrollen

word-break

Im Grunde genommen gibt word-break genauso wie word-wrap an, ob lange Wörter umgebrochen werden dürfen.

word-break: break-all richtet sich allerdings an das besondere Verhalten von chinesischem, japanischen und Koreanischen Text.

Februar

.vertical {
   word-break: break-all;
   width:1em; 
   font-size: 2em; 
   text-transform: uppercase; 
   font-family:courier; // Alternative zu Großbuchstaben
   margin:1em auto;
}

Funktioniert nur bei monoserif-Schriften oder Versalien (Großbuchstaben).