HTML / Mehrere Leerzeichen mit NBSP und white-space einfügen

Um mehrere Leerzeichen in HTML anzuzeigen, verwenden Sie   für eine kurze Sequenz oder CSS white-space: pre-wrap, um Leerzeichen und Zeilenumbrüche im Text zu erhalten. Wählen Sie passend zum Zweck:   verhindert auch das normale Umbruchverhalten an dieser Stelle. Für den Abstand zwischen Buttons oder Navigationselementen verwenden Sie CSS gap oder margin.

Warum mehrere Leerzeichen wie eines aussehen

Mit der üblichen white-space: normal-Einstellung werden aufeinanderfolgende normale Leerzeichen und Tabs zwischen Wörtern für die Anzeige zusammengefasst. Einzüge und Zeilenumbrüche im HTML-Quelltext definieren nicht direkt den visuellen Abstand. Ein Zeilenumbruch im Quelltext wird nicht immer zu einem sichtbaren Leerzeichen: seine Behandlung kann von der Sprache und dem Kontext abhängen.

Fügen Sie dieses vollständige Beispiel in einen Texteditor ein, speichern Sie es als spaces.html mit UTF-8-Codierung und öffnen Sie die Datei in einem Browser. Es wird keine Bibliothek oder ein Server benötigt. Nach der Bearbeitung speichern Sie und aktualisieren Sie den Browser. Die Beispielwörter verwenden lateinische Buchstaben, damit die Unterschiede leicht zu vergleichen sind.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML-Leerraum vergleichen</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>HTML-Leerraum vergleichen</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

Im normal Absatz enthält die Quelle drei Leerzeichen und dann sieben Leerzeichen zwischen Alpha, Beta und Gamma, aber jede Sequenz erscheint normalerweise als ein Leerzeichen. Wählen Sie den Absatz in den Entwicklerwerkzeugen aus und prüfen Sie seinen berechneten white-space Wert. Dies unterscheidet Zeichen in der Quelle von der Leerzeichenreduzierung während der Darstellung.

Geschützte Leerzeichen einfügen

  ist ein HTML-Zeichenverweis für ein geschütztes Leerzeichen, U+00A0. Wenn man es dreimal schreibt, werden drei Zeichen eingefügt, die sich nicht wie aufeinanderfolgende normale Leerzeichen reduzieren. Es kann auch eine Zahl und ihre Einheit zusammenhalten.

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

Der erste Absatz setzt drei geschützte Leerzeichen zwischen Alpha und Beta. Im zweiten Absatz verhindert 10 kg einen normalen Zeilenumbruch zwischen der Zahl und der Einheit. Die tatsächliche Breite hängt von der Schriftart und der Schriftgröße ab; drei Leerzeichen haben keine feste Breite in Pixeln.

Das Verbinden eines ganzen Satzes mit vielen geschützten Leerzeichen reduziert die Umbruchmöglichkeiten und kann auf einem schmalen Bildschirm zu Überlauf führen. Kopierter Text enthält ebenfalls ein anderes Zeichen als ein normales Leerzeichen, U+0020, was Suchen und Zeichenkettenvergleiche beeinflussen kann. Vermeiden Sie es, diese Zeichen wiederholt zu verwenden, um Inhalte auszurichten oder Einzüge zu erstellen.

Leerzeichen und Zeilenumbrüche mit white-space erhalten

Wenn wiederholte Leerzeichen und explizite Zeilenumbrüche bedeutungsvolle Teile des Textes sind, wenden Sie white-space: pre-wrap auf dieses Element an. Es bewahrt beides, während zusätzliche Zeilenumbrüche ermöglicht wird, um die verfügbare Breite anzupassen. Dies garantiert jedoch nicht, dass eine lange, ununterbrochene URL oder ein Wort in die Box passt.

Im vollständigen Beispiel behalten sowohl pre-wrap als auch pre die drei Leerzeichen zwischen Alpha und Beta sowie den Zeilenumbruch vor Gamma bei. Verkleinern Sie das Fenster: pre-wrap erlaubt zusätzliche Zeilenumbrüche, während pre dies nicht tut. Das Beispiel verwendet overflow-x: auto, um das Letztere horizontal scrollen zu lassen. Mit pre-line bleiben explizite Zeilenumbrüche erhalten, aber aufeinanderfolgende Leerzeichen zwischen Wörtern werden zusammengezogen.

Diese Tabelle fasst die gängigen Unterschiede in der Textverarbeitung zusammen. Sie impliziert nicht, dass Details wie Tabulatorbreite oder Endzeilenabstände identisch funktionieren. Überprüfen Sie auch vererbte Werte und andere CSS-Regeln. W3C-Definition von white-space

Abstände zwischen Elementen mit CSS festlegen

Um zwei Schaltflächen zu trennen, machen Sie deren übergeordnetes Element zu einem Flex-Container und setzen Sie gap statt Leerzeichen im Text hinzuzufügen. Verwenden Sie margin für Abstände außerhalb eines Elements und padding zwischen dessen Rand und Inhalt. Leerzeichen gehören zum Inhalt; CSS-Abstände steuern das Layout.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Im vollständigen Beispiel werden die Schaltflächen A und B durch gap: 1rem getrennt. Ein rem basiert auf der Schriftgröße des Wurzel-Elements, daher entspricht er nicht immer 16 Pixeln. Wenn nicht genügend Breite vorhanden ist, ermöglicht flex-wrap: wrap, dass eine Schaltfläche in die nächste Zeile geht. Behalten Sie alles andere unverändert bei, setzen Sie nur gap auf 0, vergleichen Sie das Ergebnis und stellen Sie 1rem wieder her.

Was bei abweichenden Ergebnissen zu prüfen ist

1. Wenn der wörtliche Text   erscheint, überprüfen Sie, ob Sie HTML bearbeiten. Wenn Sie ihn als Text in einen visuellen Editor einfügen oder doppelt als   maskieren, verhindert dies, dass er zu einem Leerzeichen wird.
2. Wenn Leerzeichen oder Zeilenumbrüche verschwinden, überprüfen Sie den berechneten white-space-Wert des Absatzes und stellen Sie sicher, dass der CSS-Selektor übereinstimmt. Die Quellcode-Einrückung innerhalb eines pre-wrap-Elements kann ebenfalls sichtbar werden, entfernen Sie daher unbeabsichtigten Leerraum.
3. Wenn Inhalte auf Mobilgeräten überlaufen, verkleinern Sie das Fenster und suchen Sie nach wiederholten geschützten Leerzeichen oder einer pre-Einstellung. Je nach Zweck ersetzen Sie diese durch normale Leerzeichen oder verwenden pre-wrap. Überprüfen Sie nach der Änderung erneut bei größerer Breite.

Um die Schreibweise   in einer Erklärung anzuzeigen, anstatt ein Leerzeichen einzufügen, schreiben Sie   im HTML-Quelltext. Der Standard listet die Zeichenreferenzen und ihre entsprechenden Zeichen auf. WHATWG HTML-Zeichenreferenzliste