CSS word-wrap – lange Wörter automatisch umbrechen

CSS word wrap: lange Wörter wie URLs am rechten Rand automatisch umbrechen oder trennen

word-wrap erzwingt das automatische Umbrechen langer Wörter auf eine neue Zeile, damit das Layout nicht aus dem Ruder läuft. Die Sidebar, Kommentare

Beim Fließtext von Beiträgen kann die Silbentrennung verhindern, dass überlange Wörter den umgebenden Block aus dem Rahmen schieben.

Lange Zeichenfolgen

Bei Bandwurmwörtern schützen die Browser das Layout durch eine automatische Trennung beim Bindestrich. 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 umgebrochn
  • unset
  • inherit
  • initial

IE 11, Firefox, Safari, Chrome – jeder Browser fügt den Zeilenumbruch bei word-break 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 der das Layout und auf schmalen Monitoren erscheint eine horizontale Scrollleiste.

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

word-wrap ist eine Möglichkeit, sicher zu stellen, dass lange Texte in pre-Tags nicht überlaufen. Alternativen: Lange Texte innerhalb des Layout-Blocks scrollen.

Vertikaler Text mit word-wrap

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).

CSS word-wrap K ! A B O O M