CSS, HTML & Javascript mit {stil}

CSS overflow-wrap – Zeilenumbruch für lange Wörter

Beim Fließtext von Beiträgen kann die Silbentrennung durch einen automatischen Zeilenumbruch verhindern, dass überlange Wörter, URLs und zusammengesetzte Wörter den umgebenden Block aus dem Rahmen schieben. overflow-wrap (früher word-wrap) erzwingt das automatische Umbrechen langer Wörter an einer beliebigen Stelle auf eine neue Zeile.

CSS word wrap word break

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

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

overflow-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");
});
Layout breaks bei HTML PRE

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.

overflow-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 overflow-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. In deutschen oder englischen Texten ist das Ergebnis fast immer falsch.

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

Es bleibt dabei: word-break ist für chinesischen, japanischen und koreanischen Text, für westliche Sprachen fast immer falsch. Wenn lange Wörter oder URLs umbrechen sollen, ohne den normalen Text schwer lesbar zu machen, ist overflow-wrap der richtige Ansatz.

Suchen auf mediaevent.de