&nbsp – No Break Space bzw. geschütztes Leerzeichen in HTML

&nbsp ist zwar kein HTML-Tag aber trotzdem HTML-Code um ein bestimmtes Sonderzeichen zu erzeugen und ist eine Abkürzung für „No break space“. Im Deutschen wird dies auch als „geschütztes Leerzeichen“ bezeichnet. Ein geschütztes Leerzeichen gibt es ebenfalls auch in Textverarbeitungsprogrammen wie z. B. Microsoft Word. Wofür man &nbsp benötigt und was man damit zusätzlich machen kann, erfährst du in diesem Artikel.

Wenn du nur schnell die korrekte Schreibweise des &nbsp-Sonderzeichens benötigst, kannst du dieses einfach hier herauskopieren und in deinem HTML-Code einfügen:

Was ist ein No Break Space / geschütztes Leerzeichen?

Wie es der englische Name „No Break Space“ schon vermuten lässt, wird durch &nbsp der Zeilenumbruch, deshalb „no break“, an der entsprechenden Stelle des geschützten Leerzeichens unterbunden. Erkennen kann man ein solches geschütztes Leerzeichen als Webseitenbetrachter nicht. Denn es unterscheidet sich optisch natürlich nicht von einem normalen Leerzeichen und ist einfach nur eine Lücke zwischen zwei Zeichen.

Im Prinzip handelt es sich also nur um die Anweisung für den Browser oder das Textverarbeitungsprogramm, dass an dieser Stelle z. B. bei einer Verkleinerung des Fensters, kein automatischer Zeilenumbruch stattfinden soll und das auf das geschützte Leerzeichen folgende Wort oder Zeichen nicht in die nächste Zeile rutschen soll.

Wozu braucht man &nbsp?

Wenn sich das normale Leerzeichen und das geschützte Leerzeichen mit &nbsp optisch nicht unterscheiden, könnte man sich fragen, wofür man das überhaupt benötigt. Allerdings ist dies bei der Gestaltung des Textes auf einer Webseite unter Umständen sehr hilfreich, da durch ungewollte automatische Zeilenumbrüche der Textfluss zerstört werden kann, was sich negativ für den Leser äußert und auch zum Verlassen der Webseite führen könnte. Durch die Nutzung von geschützten Leerzeichen mittels &nbsp kann man z. B. bei Anreden oder Einheiten den Umbruch verhindern:

In diesem Fall würde „Dr. med. Mustermann“ in keinem Fall umgebrochen werden. Ebenso würde das Euro-Zeichen hinter der Summe „150.000“ nicht in die nächste Zeile rutschen. Das Euro-Zeichen wird übrigens wie das &nbsp ebenfalls durch eine solche Anweisung im Quellcode dem Browser mitgeteilt.

Wie benutzt man &nbsp in HTML?

Um ein geschütztes Leerzeichen zu erzeugen, muss man nur im HTML-Quellcode an der gewünschten Stelle &nbsp gefolgt von einem Semikolon eingeben. Davor und danach dürfen keine normale Leerzeichen stehen, denn diese werden vom Browser auch ausgegeben. Schlimmer noch, wäre dann auch wieder ein automatischer Umbruch möglich! Mehr gibt es bei der einfachen Verwendung nicht zu beachten:

Leider wird der Quellcode dadurch etwas unübersichtlich und unschön, aber das lässt sich nicht vermeiden.

Leerzeilen und Absätze mit &nbsp in WordPress erzwingen?

Manchmal ist z. B. der Editor in WordPress zickig und er löscht eine Leerzeile zwischen Absätzen immer wieder. Es ist zwar nicht die beste Lösung, aber durch ein &nbsp an der entsprechenden Stelle, kann man die Leerzeile bzw. einen Absatz erzwingen. Hier nutzt man das geschützte Leerzeichen nicht für das, wofür es eigentlich gedacht ist, aber man muss nicht großartig eine Anpassung im CSS-Code vornehmen oder versuchen das im WordPress-Editor zu erzwingen. Das sieht dann z. B. so aus:

Alternativ wäre noch das break-Tag <br/> besser geeignet um die Leerzeile bzw. den Absatz zu erzwingen. Aber dieses wird zumindest bei mir im WordPress-Editor oftmals wieder entfernt, wenn ich zwischen der visuellen und der Code-Ansicht wechsel.

Ganz interessant ist noch, dass WordPress bzw. der Editor selber das &nbsp-Zeichen missbraucht um die Leerzeilen im Quellcode abzubilden, wenn man diese in der visuellen Ansicht durch Drücken der Enter-Taste erzeugt.

Abstände mit &nbsp in HTML erzwingen?

Ebenfalls kann man mit &nbsp dafür sorgen, dass mehr Whitespace erzeugt wird. Wenn man mehrere Leerzeichen hintereinander positionieren möchte, kann man dies ebenfalls mit &nbsp erreichen. Würde man im Quellcode einfach mehrere Leerzeichen nacheinander tippen, würde der Browser diese sonst in der Darstellung der Webseite auf ein einziges Leerzeichen reduzieren. Allerdings ist auch dies nur ein Behelf, da man für solche Abstände eigentlich eher mit CSS-Regeln statt mit &nbsp arbeiten sollte.