CSS, HTML und Javascript mit {stil}

CSS word-wrap

CSS word-wrap: lange Wörter am rechten Rand automatisch umbrechen

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.

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

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