1. Startseite
2. HTML
3. Leerzeichen und Zeilenumbrüche

Das Leerzeichen

HTML ignoriert aufeinanderfolgende Leerzeichen im Quellcode. Das bedeutet, dass mehrere Leerzeichen im Quellcode nicht auf dem Text übertragen werden. Stattdessen wird nur ein freies Zeichen angezeigt.

Um mehrere Leerzeichen hintereinander auszugeben, verwenden wir das Entitie   was für Non-Break-Space steht. Übersetzt so was wie ein geschütztes Leerzeichen.

<p>Text ohne Non-Break-Space</p>
<p>Text mit &nbsp; Non-Break-Space</p>
<p>Text mit mehrere &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Non-Break-Space hintereinander</p>

No-Break

Wenn der Text länger wird als der Platz, den das Browserfenster zur Verfügung stellt, dann wird an einer dieser Stellen ein Zeilenumbruch erzwungen und der Text wird in der nächsten Zeile fortgeführt. Wenn dabei an bestimmten Stellen zum Beispiel zwischen bestimmten Wörtern kein Zeilenumbruch erfolgen soll, dann kann das mit dem <nobr>-Tag festgelegt werden. Zwischen <nobr> und </nobr> kann ein Bereich definiert werden, in dem der Text nicht umgebrochen wird.

Textabsatz ohne <nobr>

<p>Um den Effekt von "nobr" zu demonstrieren benötigen wir genug Text, um einen Zeilenumbruch zu erzwingen.</p>

Textabsatz mit <nobr>

<p>Um den Effekt von "nobr" zu demonstrieren benötigen wir genug <nobr>Text, um einen Zeilenumbruch zu </nobr> erzwingen.</p>

Der mit <nobr> markierte Text wird nicht mehr umgebrochen.

Wenn der mit <nobr> markierte Text nicht mehr in die Zeile passt, dann rutscht er in die nächste Zeile.

Vorformatiert

Wenn in HTML der Quellcode von HTML oder einer anderen Sprache ausgegeben werden soll, dann wird gerne auf vorformatierte Bereiche zurückgegriffen, die durch das <pre>-Tag (preformatted) markiert werden.

Vorformatierte Bereiche geben uns oder dem Programm die Möglichkeit, den Text 1:1 wieder auszugeben, wie er im Codeeditor oder in der Konsole steht. Dabei werden Leerzeichen und Leerzeilen so wiedergegeben, wie sie editiert wurden.

<pre>
 Präformatierter Text
 über mehrere Zeilen.
 U N D   M I T   L E E R Z E I C H E N 
 direkt aus dem Editor. 
</pre>

Durch das Einrücken des Codes im Editor kann es durchaus vorkommen, das der präformatierte Text im Browserfenster ein ganzes Stück nach rechts wandert. Das führt darauf zurück, das eventuell vorhandener Leerraum im Editor direkt in den Browser übertragen wird. Das Entfernen des Lerraums im Editor sollte den Code wieder nach links rücken lassen.