CSS word-wrap – lange Wörter automatisch umbrechen

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

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

word-wrap erzwingt das automatische Umbrechen langer Wörter an einer beliebigen Stelle auf eine neue Zeile, damit das Layout nicht aus dem Ruder läuft (besonders interessant für lange URLs, Kommentare, schmale Sidebars).

Lange Zeichenfolgen

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 umgebrochn
  • 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 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.

word-break

Im Grunde genommen genauso wie word-wrap gibt word-break 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, während word-wrap: break-word. word-break: break-all;

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