decocode decocode deco    

Zeilenumbrüche #

Text wird in Browsern üblicherweise an Trennstrichen und Leerzeichen automatisch umgebrochen. Um Textumbrüche zu unterbinden oder an anderen Stellen festzulegen, stehen verschiedene Möglichkeiten zur Verfügung, die hier beschrieben werden.

Erzwungener Zeilenumbruch #

Einen einfachen Zeilenumbruch bewirkt man durch das Tag <br> (break). Dabei bleibt der Absatz als solcher erhalten, der Text wird aber nach dem <br>-Tag in der nächsten Zeile fortgeführt.

Das <br>-Tag besitzt kein End-Tag, da es ja auch nichts gibt, das von ihm umschlossen werden könnte.

Quelltext auswählen
1
2
<p>Dies ist ein Absatz.</p>
<p>Dies ist der nächste Absatz.<br>Und hier eine weitere Zeile.</p>

Optionaler Zeilenumbruch ohne Trennzeichen #

Zeilenumbrüche werden wie gesagt in der Regel automatisch am rechten Rand des Browserfensters vorgenommen, auch wenn man das nicht explizit festgelegt hat. Das ist bequem, da so der Text immer sauber dargestellt wird, unabhängig von der Größe des zur Verfügung stehenden Platzes. Es gibt aber auch Situationen, wo wir dem Browser mitteilen möchten, dass er an einer bestimmten Stelle einen Text durchaus umbrechen darf, auch wenn er von selbst vielleicht nicht drauf käme. Dazu kann man das <wbr>-Tag (word break) verwenden, das allerdings kein Trennzeichen erzeugt (für einen Zeilenumbruch mit Trennzeichen wird das Zeichen &shy; verwendet). Die gleiche Funktion wie <wbr> erfüllt das Zeichen &#8203; (zero width space), das allerdings zu Darstellungsproblemen führen kann, wenn in den Schriftsätzen auf dem Rechner des Benutzers kein entsprechendes Zeichen vorhanden ist.

Die Funktionsweise von <wbr> kann man überprüfen, indem man das HTML-Dokument mit diesem Code aufruft und dann das Browserfenster seitlich verkleinert.

Quelltext auswählen
1
2
3
<p>Donau-Dampfschifffahrtsgesellschafts-Kapitänsmütze</p>
<p>Donau-<wbr>Dampfschifffahrtsgesellschafts-<wbr>Kapitänsmütze</p>
<p>Donau-&#8203;Dampfschifffahrtsgesellschafts-&#8203;Kapitänsmütze</p>

Optionaler Umbruch mit Trennzeichen #

Hat man ein langes Wort, das durchaus innerhalb umgebrochen werden darf (und evtl. auch soll), ohne dass ein Bindestrich dies ermöglicht, kann man mit der HTML-Entity &shy; (soft hyphen) einen optionalen Trennstrich (weiches Trennzeichen) einfügen, der nur dann zur Anwendung kommt, wenn das Wort das Zeilenende überragt.

Quelltext auswählen
1
Donau-Dampf&shy;schiff&shy;fahrts&shy;gesell&shy;schafts-Kapitäns&shy;mütze

Zeilenumbruch verhindern #

Möchte man verhindern, dass eine Zeile automatisch umgebrochen wird, so kann man diesen Textbereich mit dem CSS-Attribut white-space:nowrap; schützen. Auch wenn es sich hierbei nicht um ein HTML-Element handelt, soll es der Vollständigkeit halber an dieser Stelle dennoch erwähnt werden.

Quelltext auswählen
1
2
3
4
5
<p style='white-space:nowrap;'>Neulich haben wir eine lustige Dampferfahrt gemacht.
Es waren nur nette Leute dort, und wir hatten viel Spaß.<br>Das Wetter war
bombastisch, und das Buffet reichhaltig. Alle sind am Ende zufrieden nach Hause
gegangen. Bestimmt machen wir das nächstes Jahr wieder sowas. Vielleicht kommen
dann ja noch mehr Leute. Schön wäre es jedenfalls...</p>

Das führt nun dazu, dass der Text in einer Zeile bleibt, wir aber den Fensterinhalt nun seitlich scrollen müssen, damit wir alles lesen können. Innerhalb dieses so geschützten Bereiches wird ein <br> aber trotzdem ausgeführt.

Wortzwischenraum schützen #

In manchen Fällen möchte man auch verhindern, dass an einem Leerzeichen umgebrochen wird. Dazu verwendet man das geschützte Leerzeichen &nbsp; (no break space).

Quelltext auswählen
1
2
3
4
<p>Ein Haus mit 1.500&nbsp;m<sup>2</sup> Wohnfläche kostete am
23.&nbsp;Februar&nbsp;2004 noch 100.000&nbsp;€ inkl. 16&nbsp;%&nbsp;MwSt.</p>
<p>Ein Haus mit 1.500 m<sup>2</sup> Wohnfläche kostete am 23. Februar
2004 noch 100.000 € inkl. 16 % MwSt.</p>

In diesem Beispiel wird ersichtlich, was geschieht, wenn z. B. Zahlen und ihre Einheiten durch Zeilenumbruch voneinander getrennt werden. Wer es typografisch ganz korrekt haben möchte, kann hier auch das geschützte schmale Leerzeichen &#8239; verwenden.

Geschützter Bindestrich #

Möchte man verhindern, dass ein zusammengesetztes Wort an einem Bindestrich getrennt wird, wenn das Wort nicht mehr ganz auf eine Zeile passt, dann verwendet man statt des Bindestrichzeichens (-) die Unicode-Entity &#8209; (geschützter Bindestrich).

Quelltext auswählen
1
2
<p>Donau&#8209;Dampfschifffahrtsgesellschafts&#8209;Kapitänsmütze</p>
<p>Donau-Dampfschifffahrtsgesellschafts-Kapitänsmütze</p>

Leerzeichen und Bindestriche #

Zeichen HTML Unicode dez. Unicode hex.
Geviert-Leerzeichen | | &emsp; &#8195; &#x2003;
Halbgeviert-Leerzeichen | | &ensp; &#8194; &#x2002;
normales Leerzeichen | | &#32; &#x0020;
schmales Leerzeichen | | &thinsp; &#8201; &#x2009;
sehr schmales Leerzeichen | | &#8202; &#x200A;
Leerzeichen ohne Breite |​| &#8203; &#x200B;
Nichtverbinder ohne Breite |‌| &zwnj; &#8204; &#x200C;
Verbinder ohne Breite |‍| &zwj; &#8205; &#x200D;
geschütztes normales Leerzeichen | | &nbsp; &#160; &#x00A0;
geschütztes schmales Leerzeichen | | &#8239; &#x202F;
Minus-Bindestrich - &#45; &#x002D;
echter Bindestrich &#8208; &#x2010;
Halbgeviertstrich (n-dash) &ndash; &#8211; &#x2013;
Geviertstrich (m-dash) &mdash; &#8212; &#x2014;
echtes Minuszeichen &minus; &#8722; &#x2212;
geschützer Bindestrich &#8209; &#x2011;
weiches Trennzeichen ­ &shy; &#173; &#x00AD;