jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS text-indent hanging/each-line Builder

Generieren Sie CSS text-indent mit hanging- und each-line-Schlusselwortern fur hangende Einzuge und Zeilenumbruch-Einruckungen.

Tool wird geladen...

Was ist CSS text-indent hanging/each-line Builder?

CSS text-indent unterstützt jetzt die Schlüsselwörter hanging und each-line (Baseline 2026: Chrome 130+, Safari 18.2+, Firefox 135+). hanging kehrt die Einzugsrichtung um: die erste Zeile bleibt linksbündig und alle folgenden Zeilen werden um die angegebene Länge eingerückt. each-line wendet den Einzug nach jedem erzwungenen Zeilenumbruch (wie <br>) an, nicht nur nach der ersten Zeile. Sie können beide Schlüsselwörter mit einem Längenwert kombinieren: text-indent: 2em hanging each-line erzeugt einen hängenden Einzug, der sich nach jedem Zeilenumbruch zurücksetzt.

Kurze Antwort

Verwenden Sie text-indent: 2em hanging, um einen hängenden Einzug zu erzeugen, bei dem die erste Zeile linksbündig ist und die folgenden Zeilen um 2em eingerückt werden. Fügen Sie each-line hinzu, um den Einzug auch nach jedem erzwungenen Zeilenumbruch anzuwenden. Browserunterstützung: Chrome 130+, Safari 18.2+, Firefox 135+ (Baseline 2026). Das Tool generiert einen Fallback für ältere Browser, die die Schlüsselwörter ignorieren und einen normalen Erstzeilen-Einzug anwenden.

Last updated: 2026-06-01

Einschränkungen

  • hanging und each-line erfordern Baseline-2026-Browser (Chrome 130+, Safari 18.2+, Firefox 135+). Ältere Browser ignorieren die Schlüsselwörter stillschweigend und wenden stattdessen einen standardmäßigen Erstzeilen-Einzug an - akzeptabel für progressive Verbesserung, kann aber präzise Layout-Anforderungen beeinträchtigen.
  • each-line wird nur bei erzwungenen Zeilenumbrüchen (<br>, <hr> oder Elemente mit display: block im Text) ausgelöst. Es setzt nicht nach automatischen Zeilenumbrüchen in schmalen Containern zurück. Wenn Sie Einzugskontrolle pro automatisch umbrochener Zeile benötigen, ziehen Sie padding-left mit negativem text-indent in Betracht.
  • text-indent funktioniert nicht auf Inline-Elementen. Für hängende Einzüge auf Inline-Ebene in gemischten Inline/Block-Layouts verwenden Sie padding-left mit der gewünschten Einzugsbreite und einem negativen text-indent auf dem übergeordneten Block-Container.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Einzugslängenwert in em-, px- oder rem-Einheiten. 2em ist der Standard für bibliografische hängende Einzüge.
  2. Aktivieren Sie das Schlüsselwort hanging, um einen umgekehrten Einzug zu erzeugen, bei dem die erste Zeile linksbündig ist und die folgenden Zeilen eingerückt werden.
  3. Aktivieren Sie das Schlüsselwort each-line, um den Einzug nach jedem erzwungenen Zeilenumbruch (<br>) zusätzlich zur ersten Zeile anzuwenden.
  4. Kopieren Sie die generierte CSS-Deklaration einschließlich des Fallbacks für Browser ohne hanging- oder each-line-Unterstützung.

Wofür du es nutzen kannst

  • Formatieren Sie Bibliografieeinträge mit einem hängenden Einzug, bei dem die erste Zeile linksbündig ist und die folgenden Zeilen eingerückt werden, entsprechend akademischer Zitierstilrichtlinien.
  • Erstellen Sie Definitionslisten, bei denen der Begriff linksbündig ist und der Definitionstext eingerückt wird, unter Verwendung von hanging mit each-line für mehrzeilige Definitionen mit Zeilenumbrüchen.
  • Wenden Sie hängende Interpunktionseffekte an, bei denen öffnende Anführungszeichen und Aufzählungszeichen außerhalb des Textrands hängen, für einen polierten typografischen Look.

Anwendungsfalle

Praxisbeispiele

Beispiel

Bibliografie mit hängendem Einzug

Eine Forschungspapier-Bibliografie benötigt für jeden Eintrag einen hängenden Einzug: die erste Zeile (Autorenname) ist linksbündig und die Fortsetzungszeilen (Titel, Verlag) werden um 2em eingerückt. Verwenden Sie text-indent: 2em hanging. Der Browser rückt automatisch alle Zeilen nach der ersten ein, entsprechend Chicago- und APA-Stilanforderungen.

Beispiel

Definitionsliste mit each-line

Eine Glossar-Website verwendet <br> innerhalb von Definitionsabsätzen, um Nutzungshinweise von der Hauptdefinition zu trennen. Mit text-indent: 2em hanging each-line erhält die erste Zeile jedes durch <br> getrennten Segments die umgekehrte Einzugsbehandlung. Jedes neue Segment nach einem Zeilenumbruch setzt den Einzug zurück, wodurch jeder Definitionsabschnitt visuell getrennt bleibt.

Haufige Fehler

  • hanging ohne einen Längenwert zu verwenden - hanging ist ein Schlüsselwort-Modifikator, keine Länge. Sie müssen immer zuerst einen Längenwert angeben, wie text-indent: 2em hanging. Ohne die Länge ist die Deklaration ungültig und bewirkt nichts.
  • Anzunehmen, dass each-line mit normalem Absatzumbruch funktioniert - each-line gilt nur nach erzwungenen Zeilenumbrüchen (<br> oder ähnlich). Es setzt den Einzug nicht nach jedem automatischen Zeilenumbruch zurück. Für zeilenweise Kontrolle verwenden Sie einen anderen Ansatz wie padding-left mit negativem text-indent.
  • hanging mit einem negativen text-indent-Wert zu kombinieren - hanging kehrt die Einzugsrichtung bereits um. Die Verwendung eines negativen Werts mit hanging führt zu unerwarteten Ergebnissen. Verwenden Sie positive Längenwerte mit hanging für vorhersagbares Verhalten.

Überprüfung

  1. Inspizieren Sie ein gestyltes Element in Chrome DevTools und überprüfen Sie, ob der berechnete text-indent-Wert sowohl den Längen- als auch den Schlüsselwortteil enthält. Prüfen Sie, dass die erste gerenderte Zeile linksbündig ist und alle folgenden Zeilen um die angegebene Länge eingerückt sind.
  2. Testen Sie in Firefox 135+ oder Safari 18.2+ und vergleichen Sie die Darstellung mit Chrome 130+. Der hängende Einzug sollte in allen drei Engines identisch erscheinen. Testen Sie dann in einem Browser ohne hanging-Unterstützung (wie einer älteren Chrome-Version), um zu bestätigen, dass der Fallback einen standardmäßigen Erstzeilen-Einzug produziert.

FAQ

Fragen zu CSS text-indent hanging/each-line Builder

Welche Browser unterstützen text-indent mit den Schlüsselwörtern hanging und each-line?

Beide Schlüsselwörter sind Baseline-2026-Funktionen. Chrome 130+, Safari 18.2+ und Firefox 135+ unterstützen beide Schlüsselwörter. In älteren Browsern ignorieren die Browser die Schlüsselwörter und wenden einen normalen Erstzeilen-Einzug an. Das Tool generiert eine Fallback-Deklaration, damit Ihr Layout elegant degradiert.

Kann ich hanging mit jeder Einheit für die Einzugslänge verwenden?

Ja. hanging und each-line funktionieren mit jeder CSS-Längeneinheit: em, rem, px, ch, ex, cm und sogar Prozentwerten. em ist am gebräuchlichsten für typografische Einzüge, da es mit der Schriftgröße skaliert. Prozentwerte sind relativ zur Breite des umschließenden Blocks und liefern inkonsistente Ergebnisse über Viewports hinweg - bleiben Sie bei em oder rem für vorhersagbare hängende Einzüge.

Betrifft hanging Inline-Elemente oder nur Block-Container?

text-indent gilt nur für Block-Container (einschließlich Flex-Items und Grid-Items mit display: block). Es hat keine Wirkung auf Inline-Elemente. Für Inline- oder Inline-Block-Elemente verwenden Sie padding-left mit negativem margin-left, um einen hängenden Einzug zu simulieren.

Setzt each-line den hängenden Einzug auch am Anfang jedes Absatzes zurück?

hanging und each-line sind unabhängige Schlüsselwörter, die Sie kombinieren können. hanging steuert, welche Zeilen den Einzug erhalten (erste Zeile bündig, Rest eingerückt). each-line steuert, wo der Einzug zurückgesetzt wird (nach jedem <br>). Bei gemeinsamer Verwendung - text-indent: 2em hanging each-line - erhalten Sie einen hängenden Einzug, der nach jedem erzwungenen Zeilenumbruch neu startet. Jeder neue Absatz beginnt ohnehin frisch.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren