jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Constructeur CSS text-indent hanging/each-line

Generez des declarations text-indent CSS avec les mots-cles hanging et each-line pour l'indentation suspendue et les retraits de saut de ligne.

Chargement de l'outil...

Qu'est-ce que Constructeur CSS text-indent hanging/each-line ?

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.

Réponse rapide

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.

Limites

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

Comment utiliser cet outil

  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.

A quoi il sert

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

Cas d'usage

Exemples concrets

Exemple

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.

Exemple

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.

Erreurs frequentes

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

Vérification

  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 sur Constructeur CSS text-indent hanging/each-line

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.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi