In dieser Übersicht geht es um Zeilenumbrüche, Trennstriche und Silbentrennung (via CSS3 & HTML5):

notwendige Zeilenumbrüche (optional) erzwingen

nicht erwünschte Zeilenumbrüche verhindern

Zusammenfassung, für alle die dem Motto TLDR; folgen: Zeilen-Umbruch erzwingen mit HTML <br />, Sollbruchstelle definieren mit HTML &shy; und Trennung von "Begriffen" mit Leerzeichen verhindern durch HTML &nbsp; (besser mit einer CSS-Klasse die white-space: nowrap; zuweist). Mit CSS die Silbentrennung aktivieren durch hyphens. Das war’s.

Problem mit Zeilenumbruch & Silbentrennung im HTML & CSS

Überblick

Silbentrennung war lange ein Stiefkind sowohl von HTML als auch von CSS. Der Grund, war, dass das Layout der gesamten Seite (Logo, Überschrift, Navigation, Textbereich) im Vordergrund stand und auch anhand der Bildschirmgröße auch prähistorischer Bildschirme, die Breite fast immer ausreichend war. Das von Zeitungen gewohnte Spaltenlayout mit nur etwa einer Handvoll Wörtern pro Zeile wurde nur experimentell verwendet. Die meisten Webseiten orientieren sich eher am Buchdruck, und präsentierten den Text einspaltig.

Was selbst die gängigen Textverarbeitungsprogramme der Frühzeit (z.B. WordPerfect) sehr gut beherrschten, war den Internet Browsern lange Zeit ein Buch mit sieben Siegeln.

Die Definition im HTML-Standard sieht vor, dass Fließtext bei Leerzeichen automatisch umgebrochen kann und eine neue Zeile erzeugt wird. Dies ist für alle HTML Text-Elemente (Paragraph, Tabelle, Listen, etc.) implementiert.

Wie kann man alle Browser dazu bringen, lange Worte an Soll-Bruchstellen zu trennen? Und wie kann man das Gegenteil erreichen, dass bei einem Leerzeichen kein Zeilenumbruch geschieht, damit die Maßeinheit auf jeden Fall neben der Zahl stehen bleibt? Beides ist für eine saubere Typographie von substanzieller Bedeutung. Und leider beherrschen auf die meisten CMS wie z.B. WordPress diese Kunst nicht.

Beispiel

Ohne Silbentrennung

Die deutsche Sprache kennt so schöne Bandwurmworte wie Donaudampfschifffahrtsgesellschaft oder Auslandskranken­versicherungspolice, auch wenn die zugegebenermaßen nur in speziellen Kontexten genutzt werden. Und wie soll der Browser die Zeichenfolge -123456789 behandeln, falls diese, abhängig von der Größe des Viewports, am Zeilenende steht? Direkt nach dem Minuszeichen zu trennen, wäre die denkbar schlechteste Lösung. Aber das tun moderne Browser auch nicht mehr!
Auch eine lange URL oder Telefonnummer mit Durchwahl oder wird nicht mehr getrennt; Beispiel: +49-(0)211-1234-5678
Was aber wenn hinter einer Zahl eine Einheit (wie Grad, Meter, Gewicht, Währung, etc.) steht? Die möchte man meistens auf gar keinen Fall getrennt sehen. Hier: "150 Euro" und "-17° C" als Beispiele.

Mit Silbentrennung

Die deutsche Sprache kennt so schöne Bandwurmworte wie Donaudampfschifffahrtsgesellschaft oder Auslandskrankenversicherungspolice, auch wenn die zugegebenermaßen nur in speziellen Kontexten genutzt werden. Und wie soll der Browser die Zeichenfolge -1111 behandeln, falls diese, abhängig von der Größe des Viewports, am Zeilenende steht? Direkt nach dem Minuszeichen zu trennen, wäre die denkbar schlechteste Lösung.
Auch eine lange URL oder Telefonnummer mit Durchwahl oder wird nicht mehr getrennt; Beispiel: +49-(0)211-1234-5678
Was aber wenn hinter einer Zahl eine Einheit (wie Grad, Meter, Gewicht, Währung, etc.) steht? Die möchte man meistens auf gar keinen Fall getrennt sehen. Hier: "150 Euro" und "-17° C" als Beispiele.

 

Durch Zoomen ([STRG]-Taste + Sroll-Rad der Maus) kann sehr effektiv simuliert werden, die sich die Silbentrennung im Text verhält.
Die beiden identischen Texte oben, befinden sich jeweils in einer div-Box, deren breite relativ mit 44% definiert wurde, und die noch mal von einer weiteren div-Box (90%) umschlossen sind.

Man sieht hier sehr schön, wie lange Worte aus der rechten div-Box herausragen. Die Anwendung von CSS overflow-x: scroll; ist hier keine angemessene Lösung wegen des dann erscheinenen horizontalen Scroll-Balkens am unteren Ende der Box. Mit CSS word-wrap: break-word; wäre das Problem insofern behoben, als das dann „Donaudampfschifffahrtsgesellschaft“ innerhalb der div-Box bleibt aber ohne Bindestrich getrennt würde.

Silbentrennung — CSS

Mit der CSS3 Eigenschaft hyphens hat endlich die geordnete Silbentrennung Einzug gehalten. Die sehr späte Einführung liegt sicherlich auch daran das es im Englischen bei weitem nicht so viele lange Wörter wir im zum Beispiel im Deutschen gibt.
Damit die Silbentrennung auch wie gewünscht umgesetzt wird, muss zwingend der HTML-Language Code korrekt angegeben sein. 

<html lang="de">

 

Das CSS-Markup für das obige Beispiel:

Rechte Box

/* Keine Angaben  */

Linke Box

/* hyphens */
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;

Folgende Werte sind möglich:

  • manual - keine automatische Silbentrennung, Voreinstellung bedingte Trennstriche werden beachtet
  • none - keine automatische Silbentrennung, bedingte Trennstriche werden unterdrückt, Umbruch erfolgt ausschließlich an Leerzeichen
  • auto - automatische Silbentrennung, manuell definierte bedingte Trennstriche werden dabei vorgezogen.
  • inherit - Einstellung des Elternelements, wird allerdings immer vererbt

Zeilenumbruch steuern — HTML

Obligatorischer Zeilenumbruch

HTML Element <br />

Wenn Sie innerhalb eines Absatzes, Tabellenzelle, etc. an einer bestimmten Stelle einen Umbruch wünschen, nutzen Sie das HTML-Tag <br /> (= break) und erzwingen so einen Zeilenumbruch an der gewünschten Stelle im Fließtext.
Der Text wird also in der nächsten Zeile fortgesetzt, ohne einen Abstand zu halten (wie es beispielsweise das Tag <p> (Absatz) tut).

Notieren Sie das br-Element mittels des Schrägstrichs / immer als inhaltsleer (nicht nur um XHTML-Standardkonform zu deklarieren).

Verwenden Sie das br-Element nicht zweimal direkt hintereinander um eine Leerzeile zu erzeugen. Zum einen sollte das HTML Markup nicht zur visuellen Gestaltung verwendet werden, zum anderen erschwert es die Barrierefreiheit, da Screen Reader nicht mehr sinnvoll absatzweise navigieren können.

Bedingter (optionaler) Trennstrich

HTML Element &shy;

In HTML gibt es zwei Typen von Trennzeichen: den normalen Trennstrich - (das Minuszeichen) und den weichen Trennzeichen (soft hyphen) &shy; bzw. &#173;. Der normale Trennstrich sollte von den Browsern wie jedes andere Zeichen behandelt werden (also keine Trennung erfolgen). Das weiche Trennzeichen (unsichtbar) zeigt dem Programm, wo ein Zeilenumbruch auftreten kann.

Wenn eine Zeile an einem weichen Trennzeichen umgebrochen wird, muss ein Trennstrich am Ende der ersten Zeile stehen. Wenn eine Zeile an einem weichen Trennzeichen nicht umgebrochen wird, darf das Benutzerprogramm keinen Trennstrich ausgeben.

Das Markup für das obige Beispiel:

Rechte Box

Auslandskranken&shy;versicherungspolice
   
"150&nbsp;Euro" und <span class="nobr">"-17° C"</span>  als Beispiele. 

/* CSS */
.nobr {white-space: nowrap;}

Linke Box

Auslandskrankenversicherungspolice

"150 Euro" und "-17° C" als Beispiele.

Eines vorweg: Die Anhänger der reinen Lehre der Web-Standards werden mit vielem nicht einverstanden sein. Die Realität im Web ist nun aber mal so wie sie ist und fordert Lösungen.

Zeilenumbruch verhindern — HTML

Leerzeichen in HTML

HTML Element &nbsp;

Will man zwischen zwei Worten oder zusammen gehörenden Begriffen einen Zeilenumbruch durch die automatische Trennung verhindern, benutzt man das geschützte Leerzeichen &nbsp; (not breaking space). Das entspricht dem HTML-Standard und funktioniert in allen Browsern wie gewünscht.

Damit "120 Euro", "50 km/h", "HTML 4" und "Volkswagen AG" lesbar und verständlich bleiben, kann das nicht umbrechende Leerzeichen &nbsp; verhindern, dass diese Begriffe durch einen Zeilenumbruch auseinander gerissen werden.
Der Ausdruck 120&nbsp;Euro ist zwar etwas umständlicher zu schreiben als ein einfaches Leerzeichen und wird darum auf vielen Seiten gerne "vergessen", ist jedoch gültiges HTML und überall problemlos einsetzbar.

Anzeige von Leerzeichen

Die Browser zeigen auch bei mehreren Leerzeichen in Folge, also beispielsweise     (drei Leerzeichen), immer nur ein Leerzeichen an. Auch die Angabe "%20" als Codierung für das Leerzeichen, hilft hier nicht.

Das sogenannte geschützte Leerzeichen erfreut sich, zum Leidwesen der Auguren, noch einer ganz anderen Verwendung: als Abstandhalter in folgender Form: <p>&nbsp;</p> (erzeugt eine leere Zeile, allein <p> </p> ist nicht ausreichend, da die Browser dies als leeres Element interpretieren, und gar nicht anzeigen).
Dieses Vorgehen funktioniert auch mit Listen (li), Tabellen (td), etc. und widerspricht selbstverständlich der angestrebten Trennung von Layout (CSS) und Inhalt (HTML).

Breitenloses Leerzeichen &#8203;

Als Alternative ist &#8203; (Zero Width Space = Leerzeichen ohne Breite) möglich. Dies ist ein erstaunlich selten genutztes Zeichen. Gewissermaßen ist es das Gegenteil von  : es ist aus Sicht der Programme ein Leerzeichen, wird aber nie angezeigt.

Da bei der automatischen Trennung bei Leerzeichen grundsätzlich ein Umbruch erfolgen kann, lässt es sich ähnlich wie &wbr in lange Wörter einfügen. Allerdings ist dieses Zeichen nicht in jeder Schriftart (Arabisch?) enthalten, was dann zur Darstellung eines hässlichen Kästchens mitten im Wort führt.

Fügt man dieses Zeichen allerdings in URLs oder Telefonnummern ein werden die mit dem Code %E2%80%8B beim Kopieren und Einfügen (STRG-C, STRG-V) mitgenommen. Ein nicht erwünschter Seiteneffekt. Für reinen Text scheint das „Leerzeichen ohne Breite“ trotzdem nützlich.

Alle Leerzeichen in HTML

Geschütztes Leerzeichen &nbsp;Sieht so aus: Test Test
Leerzeichen Breite n &ensp;Sieht so aus: Test Test
Leerzeichen Breite m &emsp;Sieht so aus: Test Test
Schmales Leerzeichen &thinsp;Sieht so aus: Test Test
Null breiter Nichtverbinder &zwnj;Sieht so aus: Test‌Test
Null breiter Verbinder &zwj;Sieht so aus: Test‌Test
Links-nach-rechts-Zeichen &lrm;Sieht so aus: Test‎Test
Rechts-nach-links-Zeichen &rlm;Sieht so aus: Test‏Test
Breitenloses Leerzeichen &#8203;Sieht so aus: Test​Test

Sonderzeichen

Nach diversen Tests trennen der Internet Explorer, Firefox, Chrome, Safari und Opera weder nach Trennstrichen (Minuszeichen, -), Prozentzeichen (%) und Gradzeichen (°), vor öffnenden und nach schließenden Klammern noch vor bzw. nach Guillemets (« »). Das ist in den meisten Fällen auch ganz praktisch, besonders für die deutsche Sprache mit ihren langen zusammen gesetzten Bandwurm-Worten.

Umbruch von Zeilen & Wörtern — CSS

Zeilenumbrüche mit CSS

CSS Eigenschaft white-space — Leerzeichen

Die W3C-Standards empfehlen die Formatierung durch CSS speziell durch die Eigenschaft white-space. Seit CSS 2.1 ist white-space nicht nur bei block-Elementen wie <p> und <div> sondern auch bei inline-Elementen wie <span> und <a>zulässig. Also alles super! Diese CSS-Eigenschaft kann folgende Werte annehmen:

normal
Voreinstellung (Default-Wert): Zeilenumbrüche im Quellcode (des HTML-Dokuments) werden nicht dargestellt und mehrere Leerzeichen im Quelltext zu einem zusammengefügt. Der Browser fügt einen Zeilenumbruch am Zeilenende ein.
pre
Zeilenumbrüche und Leerzeichen werden so dargestellt, wie sie im Quellcode eingegeben sind (analog zum HTML-Element<pre>).
nowrap
Zeilenumbrüche werden vom Browser nicht vorgenommen, solange sie nicht durch <br> erzwungen werden. Mehrere Leerzeichen im Quellcode werden auf eines gekürzt .
pre-wrap
Zeilenumbruch, Leerzeichen und Einrückungen richten sich nach dem Quelltext. Allerdings erfolgt am Zeilenende auch ein automatischer Umbruch, wenn nicht genug Platz da ist (vergleichbar mit <pre>).
pre-line
Zeilenumbrüche werden dargestellt, wie sie im Quellcode angegeben werden, wenn sie durch <br> erzwungen werden oder automatisch am Zeilenende. Mehrere Leerzeichen im Quellcode werden zu einem zusammengefügt.
inherit
Einstellung des Elternelements.

Diese Tabelle soll das Verhalten der verschiedenen Werte veranschaulichen:

  Neue Zeilen Leerzeichen & Tabulatoren Text Umbruch
normalkollabierenkollabierenja
prebleiben erhaltenbleiben erhaltennein
nowrapkollabierenkollabierennein
pre-wrapbleiben erhaltenbleiben erhaltenja
pre-linebleiben erhaltenkollabierenja

Die CSS3 white-space Eigenschaft folgt buchstäblich der obigen Matrix. Die CSS Eigenschaften text-space-collapse und text-wrap sind beide veraltet und nicht Teil des Standards.

 

Trennung von Wörtern mit CSS

CSS Eigenschaft word-wrap — Umbruch von Wörtern

Um Wörter an den (festgelegten) Grenzen des umgebenden Elements (Absatz) umzubrechen, lassen sich sowohl Inline als auch Block Elemente mit der Eigenschaft word-wrap steuern.
Beachte: Es erfolgt ein geometrischer Umbruch, ohne Rücksicht auf Semantik oder Silbentrennung.

normal
Standardwert (Default-Wert): bricht Wörter nur an erlaubten Breakpoints um (Leerzeichen, &shy;, - (innerhalb eines Wortes) <br />).
break-word
Erlaubt Umbruch innerhalb des Wortes
inherit
Einstellung des Elternelements.

Ursprünglich konnte nur der Internet Explorer die proprietäre MS-Eigenschaft word-wrap interpretieren. In den CSS3-Entwurf wurde diese dann unter den Namen overflow-wrap übernommen wurde. Die Browser unterstützen aber weiterhin nur das ältere Synonym word-wrap.

Standards — Layout mit CSS / HTML

Grundsätzliches

Ein Web-Designer kann nie wissen, wie ein Besucher seine Webseite erlebt. Er weiß nicht, wie groß dessen Bildschirm ist, wie die Auflösung des Monitors ist, ob das Browserfenster auf Vollbild aufgezogen wird oder nicht, welche Schriftarten installiert sind und ob die Ansicht eventuell vergrößert oder verkleinert wurde. Er kann deshalb überhaupt nicht festlegen, an welchen Stellen sein Text umgebrochen wird. Er sollte aber alles tun, damit der Text lesbar bleibt. Hier sind einige Möglichkeiten, um langen Bandwurm-Wörtern eine möglichst passende Soll-Bruchstelle zu geben.

Man kann leider oft nicht beides haben: ein Standard-gemäß korrektes HTML-Dokument, das die ästhetischen Anforderungen an Fließtext erfüllt. Wofür man sich entscheidet, bleibt jedem selbst überlassen.

Man sieht, es gibt manchmal keinen einfachen, den HTML-Standards entsprechenden Weg, einige Browser, wie den Internet Explorer an unerwünschten Zeilenumbrüchen innerhalb einzelner Begriffe zu hindern. Man kann eben nicht alles haben, und unter gewissen Aspekten sind die Besucher (oder der Auftraggeber) wichtiger als das Kleben an Standards, die für aktuelle Probleme keine befriedigenden Lösungen bieten.

Keine Lösung

HTML Element <wbr /> — deprecated

Die Browser-Hersteller hatten schon vor Jahren das Element <wbr /> (= word break) eingeführt, das weitgehend unbekannt blieb und auch vom W3C nie in die HTML-Spezifikation aufgenommen wurde.
Es tut jedoch zuverlässig das, was besonders wir Deutschen mit unseren langen Wörtern so dringend brauchen: einen optionalen Zeilenumbruch Umbruch, fügt jedoch keinen Trennstrich ein, der jedoch bei URLs oder Telefonnummern auch fatal wäre.
Es ist wirkt also ähnlich wie das Element &shy; — doch leider ist das Dokument damit nicht mehr valide.

HTML-Element <nobr> — deprecated

Um zu verhindern, dass bestimmte Textabschnitte vom Internet Explorer oder den anderen Browsern auseinander gerissen werden, war das HTML-Element <nobr> (no break; ursprünglich von Netscape eingeführt) früher ganz nützlich.
Es wird seit vielen Jahren von allen Browsern interpretiert und funktionierte somit, es wurde aber ebenfalls nie in den offiziellen HTML-Standard aufgenommen:
<nobr>-18° C</nobr> oder <nobr>vis-a-vis</nobr> ist einfach zu verwenden, bewirkt aber auch, dass die Seite nicht mehr valide ist.
Besser ist es, wie oben gezeigt, eine CSS-Klasse .nobr (der Name ist natürlich frei wählbar) zu definieren.

HTML-Element nowarp — deprecated

In Tabellenzellen kann man dem td und th wie hier ein <td nowrap>veraltet!</td> geben, um einen Zeilenumbruch zu verhindert. Auch dieses Attribut gilt als „depreciated“, vom Gebrauch wird also abgeraten. Statt dessen, das obige CSS mit white-space:nowrap verwenden.

Hier ein ausführlicher Artikel über Silbentrennung & Barrierefreiheit.

Worte & Wörter

Zwei Zitate, die mir bei meiner Recherche über den Weg liefen:

"Es wäre zu wünschen, dass sich die Buchdrucker in diesem und in vielen ähnlichen Ausdrücken (z. B. umstellen) dem allgemeinen Gebrauche fügten. Dieser verlangt: er bricht, stellt den Satz um; der Satz wird umgebrochen, umgestellt; der Satz ist umzubrechen, umzustellen usw."
(Fußnote in einem alten Duden, die leider keine Beachtung fand)

"Wörter bedeuten spätestens dann das gleiche (oder dasselbe?), wenn der Unterschied nur noch Korinthenkackern bekannt ist, die scheinbar (oder anscheinend?) die einzigen sind, die ihn in wenigen Worten (oder Wörtern?) erklären können. Die weisen dann andere grundsätzlich (oder ausnahmslos?) auf solche Fehler hin. Aber den meisten ist das zu schwer (oder schwierig?), so dass die Mühe umsonst (oder vergeblich?) aufgewandt ist."
(Helmut Richter, de.etc.sprache.deutsch, 2004-06-05)