jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free CSS text-indent hanging and each-line Builder

Generate CSS text-indent declarations using the hanging and each-line keywords (Baseline 2026). hanging reverses the indent so the first line stays flush left and subsequent lines are indented. each-line applies indentation after every forced line break. Combine both: text-indent: 2em hanging each-line. The tool also generates a fallback declaration for browsers that do not support these keywords yet.

Loading tool...

What is CSS text-indent hanging and 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.

quickAnswer

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.

limitations

  • 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.

How to use this 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.

What you can use it for

  • 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.

Use cases

Practical examples

example

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.

example

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.

Common mistakes

  • 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.

verification

  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

Questions about CSS text-indent hanging and 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.

Related tools

More 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.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool