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 now supports the hanging and each-line keywords (Baseline 2026: Chrome 130+, Safari 18.2+, Firefox 135+). hanging reverses the direction of the indent: the first line stays flush left and all subsequent lines are indented by the specified length. each-line applies indentation after every forced line break (such as <br>), not just the first line. You can combine both keywords with a length value: text-indent: 2em hanging each-line creates a hanging indent that also resets after every line break.

Kurze Antwort

Use text-indent: 2em hanging to create a hanging indent where the first line is flush left and subsequent lines are indented by 2em. Add each-line to also apply indentation after every forced line break. Browser support: Chrome 130+, Safari 18.2+, Firefox 135+ (Baseline 2026). The tool generates a fallback for older browsers that ignores the keywords and applies a normal first-line indent.

Einschränkungen

  • hanging and each-line require Baseline 2026 browsers (Chrome 130+, Safari 18.2+, Firefox 135+). Older browsers silently ignore the keywords and apply a standard first-line indent instead -- acceptable for progressive enhancement but may break precise layout requirements.
  • each-line only triggers on forced line breaks (<br>, <hr>, or elements with display: block inside the text). It does not reset after soft-wrapped lines in narrow containers. If you need indentation control per soft-wrapped line, consider padding-left with a negative text-indent workaround.
  • text-indent does not work on inline elements. For inline-level hanging indents in mixed inline/block layouts, use padding-left with the desired indent width and a negative text-indent on the parent block container.

So nutzt du dieses Tool

  1. Choose the indent length value in em, px, or rem units. 2em is the standard for bibliography hanging indents.
  2. Toggle the hanging keyword to create a reverse indent where the first line is flush left and subsequent lines indented.
  3. Toggle the each-line keyword to apply the indent after every forced line break (<br>) in addition to the first line.
  4. Copy the generated CSS declaration including the fallback for browsers without hanging or each-line support.

Wofür du es nutzen kannst

  • Format bibliography entries with a hanging indent where the first line is flush left and subsequent lines are indented, matching academic citation style guides.
  • Create definition lists where the term is flush left and the definition text is indented, using hanging with each-line to handle multi-line definitions with line breaks.
  • Apply hanging punctuation effects where opening quotes and bullets hang outside the text margin for a polished typographic look.

Anwendungsfalle

Praxisbeispiele

Beispiel

Bibliography with hanging indent

A research paper bibliography needs each entry to have a hanging indent: the first line (author name) is flush left and the continuation lines (title, publisher) are indented 2em. Use text-indent: 2em hanging. The browser indents all lines after the first automatically, matching Chicago and APA style requirements.

Beispiel

Definition list with each-line

A glossary site uses <br> within definition paragraphs to separate usage notes from the main definition. With text-indent: 2em hanging each-line, the first line of each <br>-separated segment gets the reverse indent treatment. Each new segment after a line break resets the indent, keeping each definition section visually separated.

Haufige Fehler

  • Using hanging without a length value -- hanging is a keyword modifier, not a length. You must always specify a length value first, such as text-indent: 2em hanging. Without the length, the declaration is invalid and does nothing.
  • Assuming each-line works with normal paragraph wrapping -- each-line only applies after forced line breaks (<br> or similar). It does not reset the indent after every soft-wrapped line. For per-line control, use a different approach such as padding-left with negative text-indent.
  • Combining hanging with a negative text-indent value -- hanging already reverses the indent direction. Using a negative value with hanging produces unexpected results. Use positive length values with hanging for predictable behavior.

Überprüfung

  1. Inspect a styled element in Chrome DevTools and verify the computed text-indent value includes both the length and keyword parts. Check that the first rendered line is flush left and all subsequent lines are indented by the specified length.
  2. Test in Firefox 135+ or Safari 18.2+ and compare the rendering to Chrome 130+. The hanging indent should appear identically in all three engines. Then test in a browser without hanging support (such as an older Chrome version) to confirm the fallback produces a standard first-line indent.

FAQ

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

Which browsers support text-indent with hanging and each-line keywords?

Both hanging and each-line are Baseline 2026 features. Chrome 130+, Safari 18.2+, and Firefox 135+ support both keywords. In older browsers, the browser ignores the keywords and applies a regular first-line indent. The tool generates a fallback declaration so your layout degrades gracefully.

Can I use hanging with any unit for the indent length?

Yes. hanging and each-line work with any CSS length unit: em, rem, px, ch, ex, cm, and even percentage values. em is most common for typographic indents because it scales with the font size. Percentage values are relative to the containing block width and produce inconsistent results across viewports -- stick to em or rem for predictable hanging indents.

Does hanging affect inline elements or only block containers?

text-indent applies only to block containers (including flex items and grid items with display: block). It has no effect on inline elements. For inline or inline-block elements, use padding-left with a negative margin-left approach to simulate a hanging indent.

Does each-line also reset the hanging indent at the start of each paragraph?

hanging and each-line are independent keywords you can combine. hanging controls which lines get the indent (first line flush, rest indented). each-line controls where the indent resets (after every <br>). When used together -- text-indent: 2em hanging each-line -- you get a hanging indent that restarts after each forced line break. Each new paragraph naturally starts fresh regardless.

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