HTML: Kein Zeilenumbruch zwischen bestimmten Worten

Manchmal möchten wir auf einer HTML-Seite, dass bestimmte Worte zusammen bleiben und kein automatischer Zeilenumbruch zwischen diesen Worten gesetzt wird. Denkbar sind zum Beispiel Firmennamen oder ein Name und eine zugehörige Zahl, die zusammengehören und nicht getrennt werden sollen.

Für alle diese Fälle können wir das sogenannte geschützte Leerzeichen verwenden. Das geschützte Leerzeichen ist die Zeichenfolge   was die Abkürzung für non-breaking space (Leerzeichen ohne Zeilenumbruch) ist. Dieses Zeichen können wir einfach direkt in unseren HTML Code einfügen, wie das folgende Beispiel zeigt:

<p>Die Nummer 123&nbsp;456&nbsp;789 gehört zusammen.</p>

Angezeigt wird   als normales Leerzeichen. Wenn es an dieser Stelle aber einen Zeilenumbruch geben müsste, wird die Zahl 123 456 789 nicht umgebrochen, alle Ziffern bleiben nebeneinander stehen. Alternativ kann auch die Zeichenfolge   verwendet werden, die den gleichen Effekt hat.

Mehrere Leerzeichen nebeneinander schreiben

HTML hat die Angewohnheit standardmäßig mehrere Leerzeichen nebeneinander zu einem Leerzeichen zusammen zu fassen. Das ist auch ganz gut so, denn wenn sämtliche Leerzeichen, Tabulatoren und Zeilenumbrüche aus der HTML Datei auch sichtbar wären, wäre so gut wie jede Seite zerschossen bzw. das Anlegen von Seiten um einiges schwieriger.

Was können wir nun aber tun, wenn wir trotzdem mehrere Leerzeichen nebeneinander anzeigen lassen möchten?

     
     

Wie das Beispiel zeigt, können wir wieder unser geschütztes Leerzeichen verwenden. Beide Zeilen HTML Code zeigen 5 Leerzeichen nebeneinander an. Entweder können wir fünfmal unser Leerzeichen ohne ein herkömmliches Leerzeichen verwenden oder wir kombinieren normale Leerzeichen mit dem geschützten Leerzeichen.

Ganze Zeile ohne Umbruch

Wenn wir eine ganze Zeile nicht umbrechen lassen möchten, ist es etwas schwierig, zwischen jedes Wort das geschützte Leerzeichen zu schreiben. Zum Glück gibt es dafür das HTML Tag <nobr>.

<nobr>Diese Zeile bleibt in einer langen Zeile zusammen.</nobr>

Die Zeile zwischen <nobr> und </nobr> wird nicht umgebrochen und als komplette Zeile hintereinander im Browser angezeigt.

CSS-Eigenschaft

Interessant ist in diesem Zusammenhang auch der Artikel zu der CSS Eigenschaft white-space. Mit white-space können Sie dasselbe erreichen wie mit den geschützten Leerzeichen und dem HTML Tag <nobr>. Wenn Sie white-space auf den richtigen Wert setzen, lässt sich der damit formatierte HTML Code mit Zeilenumbrüchen und Leerzeichen im Browser ausgeben. Aber mehr dazu im oben erwähnten Artikel.