Um umbrochenen Einträgen, die durch <br>-Tags getrennt sind, einen hängenden Einzug zu geben, wende text-indent: 2em hanging each-line auf ihren Block-Container an. Prüfe die Unterstützung für beide Schlüsselwörter; wenn ältere Browser relevant sind, gib jedem Eintrag einen eigenen Block und verwende Innenabstand mit einem negativen Einzug.

Diese Anleitung richtet sich an jemanden, der eine kleine HTML-Seite auf einem Mac bearbeitet und möchte, dass jeder Eintrag bündig am linken Rand beginnt, während Folgezeilen weiter nach innen rücken. Die Beispiele verwenden synthetischen Text und benötigen lediglich einen einfachen Text- oder Code-Editor und einen Browser.

Warum ein normaler hängender Einzug nach einem Umbruch-Tag nicht funktioniert

Es sind zwei verschiedene Zeilenenden zu berücksichtigen. Ein <br> erzeugt einen expliziten Zeilenumbruch. Ein weicher Umbruch entsteht, wenn der Browser den Text an die verfügbare Breite anpasst. Das gewünschte Layout behandelt den ersten Fall als Beginn eines weiteren Eintrags und den zweiten als Fortsetzung. WHATWG definiert <br> als Zeilenumbruch; es erzeugt keinen neuen Absatz und keinen Container für einen Eintrag. HTML-Standard: Das br-Element.

Ein einfaches negatives text-indent wirkt sich auf die erste formatierte Zeile eines Blocks aus. Innenabstand kann daher für diesen Block einen hängenden Einzug erzeugen, aber der Auszug wird dadurch nicht nach jedem <br> erneut angewendet. Die folgenden Einträge gehören weiterhin zum selben Block. MDN: text-indent.

Die CSS-Spezifikation definiert die dafür benötigte Kombination: each-line umfasst die erste Zeile und Zeilen direkt nach erzwungenen Umbrüchen; hanging kehrt diese Auswahl um. Zusammen rücken sie die durch weichen Umbruch entstandenen Folgezeilen ein, während jede explizit begonnene Zeile bündig bleibt. W3C: Einzug der ersten Zeile.

Das Ziel sieht so aus. Die unten gezeigten Zeilenenden dienen nur zur Veranschaulichung; der Browser wählt die tatsächlichen Umbruchstellen anhand der verfügbaren Breite und der Schriftmetriken.

Eintrag A beginnt am äußeren Rand und wird
    weiter eingerückt, wenn die Breite nicht reicht.
Eintrag B beginnt ebenfalls am äußeren Rand und hat
    eine eigene eingerückte Fortsetzung.
Eintrag C ist kurz.

Wähle eine Methode, bevor du die Seite änderst

Wähle deinen Ansatz anhand des vorhandenen Markups und der Anforderungen an den Browser. Diese Entscheidungstabelle ergibt sich aus dem dokumentierten Verhalten des Einzugs und den Browser-Unterstützungsdaten; sie dient als Umsetzungshilfe und beschreibt keine separate Browserfunktion.

Deine Situation Empfohlener Ansatz
Explizite Zeilenumbrüche gehören zu einem Textabschnitt, und die unterstützten Browser reichen aus Behalte die Umbrüche bei und verwende hanging each-line
Die Einträge sind separate Absätze oder Listenelemente Gib jedem Eintrag das passende strukturelle Markup
Auch ältere Browser müssen den hängenden Einzug anzeigen Verwende einen Block pro Eintrag mit Innenabstand und einem negativen Einzug
Du kannst nur CSS bearbeiten und einem älteren Browser fehlen die Schlüsselwörter Behalte ein gut lesbares, bündiges Layout bei oder bitte um eine Markup-Änderung

Leite die Unterstützung der Schlüsselwörter nicht aus der Unterstützung für einfache text-indent ab. Die aktuellen Kompatibilitätsdaten von MDN führen hanging und each-line ab Safari 15, Firefox 121 und Chrome 146 auf. Ältere Installationen können gewöhnliche Einzüge unterstützen, diese Kombination jedoch ablehnen. MDN-Browserkompatibilitätsdaten: text-indent.

Prüfe außerdem, ob die Umbrüche der passenden Struktur entsprechen. WHATWG sieht <br> für Umbrüche vor, die zum Inhalt gehören, und besagt, dass es keine thematischen Gruppen innerhalb eines Absatzes trennen darf. Separate Absätze gehören in Absatzelemente; eine Sammlung von Listenelementen sollte Listen-Markup verwenden. HTML-Standard: Das br-Element, HTML-Standard: Gruppierung von Inhalten.

Behalte die Umbruch-Tags bei der nativen CSS-Lösung bei

Das folgende vollständige HTML-Dokument zeigt die Methode, bei der die Umbrüche erhalten bleiben. Füge es auf deinem Mac in einen einfachen Text- oder Code-Editor ein, speichere es als hanging-indent.html und öffne die Datei in einem Browser. Verwende eine HTML-Datei statt eines Rich-Text-Dokuments.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

Die @supports-Bedingung prüft die vollständige Deklaration, bevor sie angewendet wird. Browser, die diese Kombination nicht unterstützen, behalten das ausdrücklich festgelegte bündige Layout bei. Feature-Abfragen wenden CSS abhängig von der Browserunterstützung bedingt an. MDN: @supports.

Wende den Einzug auf .entries an, den Block, der den Text enthält. Die betreffende Eigenschaft gilt für Block-Container; die Deklaration auf das <br> zu setzen, bietet keinen Container für den folgenden Eintrag. MDN: text-indent.

Der Wert 2em ist eine anpassbare Gestaltungsentscheidung. Probiere nach einer Prüfung des schmalen Layouts einen kleineren oder größeren Wert aus. Er erzeugt einen gleichmäßigen Versatz für Folgezeilen; er misst nicht die Breite von Eintrag A: und richtet Text nicht automatisch unter dem ersten Wort nach einer unterschiedlich langen Beschriftung aus.

Verwende separate Blöcke, wenn jeder Browser den Einzug anzeigen muss

Wenn jeder Eintrag ein eigenständiger Absatz ist, ändere das Markup so, dass jeder Eintrag eine eigene erste Zeile hat. Die folgende vollständige Alternative entfernt die trennenden Umbrüche und wendet die herkömmliche Berechnung für den hängenden Einzug separat auf jeden Absatz an.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

Der Innenabstand verschiebt den Beginn des Absatzinhalts um 2em nach innen. Der negative Einzug verschiebt nur die erste Zeile um denselben Betrag zurück. Umgebrochene Zeilen behalten ihre eingerückte Ausgangsposition bei. Die Werte müssen gleich sein: Wenn du nur einen änderst, verschiebt sich der Beginn der ersten Zeile. MDN dokumentiert negative Einzüge, während padding-inline-start den Innenabstand an der logischen Anfangskante festlegt. MDN: text-indent, MDN: padding-inline-start.

Bei einer beispielhaften Schriftgröße von 16 Pixeln entspricht ein Versatz von 2em 32 Pixeln: Die Fortsetzung beginnt 32 Pixel weiter innen, und die Anpassung der ersten Zeile beträgt −32 Pixel. Dies ist eine Berechnung für das Beispiel und kein gemessenes Darstellungsergebnis.

Entferne die alten Trennzeichen, wenn du diese Struktur übernimmst. Behalte jeden vollständigen Eintrag und seine vorhandene Inline-Formatierung in seinem neuen Absatz bei. Wenn der Inhalt eine Liste ist, verwende stattdessen Listenelemente; das Absatzbeispiel eignet sich ausdrücklich für eigenständige Absätze. HTML-Standard: Gruppierung von Inhalten.

Prüfe Umbruch und Textfluss, bevor du fertig bist

Teste die Seite bei einer Breite, bei der beide langen Einträge umgebrochen werden. Vergrößere dann das Fenster, bis sie in einzelne Zeilen passen. Mit den folgenden Prüfungen kannst du ein Einzugsproblem von einem Umbruch- oder Strukturproblem unterscheiden.

  1. Prüfe den Anfang jedes Eintrags. Im Beispiel mit erhaltenen Umbrüchen sollte der Text nach jedem <br> zum äußeren Rand zurückkehren. Ist das nicht der Fall, prüfe die Unterstützung für die vollständige Schlüsselwortkombination.
  2. Prüfe jede Fortsetzung. Lange Einträge sollten eingerückt umbrochen werden. Kurze Einträge sollten bündig bleiben, ohne zusätzlichen vorangestellten Leerraum.
  3. Prüfe die schmalste vorgesehene Spalte. Verringere den Einzug, wenn er zu viel von der verfügbaren Zeilenbreite beansprucht.
  4. Prüfe den tatsächlichen Inhalt. Behalte beim Verschieben in einen separaten Block die Wörter, Inline-Hervorhebungen und vorgesehenen expliziten Umbrüche jedes Eintrags bei.

Wenn nichts umbricht, überprüfe white-space. Das Beispiel verwendet normal, wodurch Leerraum im Quelltext zusammengefasst wird und Umbrüche möglich sind. pre erhält Leerraum, verhindert aber gewöhnliche weiche Umbrüche; pre-wrap erhält Leerraum und ermöglicht sie zugleich. Ein Einzug kann auf einer Folgezeile nicht sichtbar werden, wenn keine entsteht. MDN: white-space.

Vermeide es, den Einzug mit Leerzeichen nachzubilden. Bei white-space: normal werden Folgen von Leerzeichen zusammengefasst. Füge auch keine zusätzlichen Umbruch-Tags an den aktuellen Umbruchstellen des Fensters ein: Dadurch würden vom Browser gewählte Fortsetzungen zu expliziten Anfängen, was die Behandlung durch each-line verändert. MDN: white-space, W3C: Einzug der ersten Zeile.

Überlasse den Zeilenumbruch und die Glyphenformung dem Browser. Teile einen Eintrag nicht in Zeichen-Wrapper auf, um seine sichtbaren Zeilen zu berechnen. W3C dokumentiert Bedingungen, unter denen Inline-Grenzen die Formung unterbrechen, darunter nicht null gesetzte Innenabstände, Rahmen oder Außenabstände zwischen Zeichen. Für diese Aufgabe vermeidest du solche zusätzlichen Grenzen innerhalb von Wörtern, wenn du ganze Einträge an ihren vorgesehenen Grenzen umbrechen lässt. W3C: Formung über Elementgrenzen hinweg.

Behalte zum Schluss die Struktur bei, die zu deinem Inhalt passt: Behalte bedeutungsvolle explizite Umbrüche mit hanging each-line bei oder gib eigenständigen Einträgen jeweils eigene Blöcke. Vergewissere dich bei den vorgesehenen Breiten, dass jeder Eintrag bündig beginnt und nur seine natürlich umbrochenen Fortsetzungen nach innen rücken.

Quellen