v146 · CSS · Hanging Keyword Demo

Hanging Keyword Demo

The hanging keyword inverts the indentation: the first line starts at the normal block edge, and all subsequent (soft-wrapped) lines are indented. This is the typographic "hanging indent" used in bibliographies, glossaries, and verse.

Supported in Chrome 146+. On older browsers text-indent: 2em hanging falls back to text-indent: 2em (the length is still applied, the keyword is ignored).

side-by-side comparison

text-indent: 2em (default)

2em indent mark

First line is indented by 2em. Subsequent soft-wrapped lines continue at the normal block left edge without any indent applied to them at all.

text-indent: 2em hanging

2em indent mark

First line starts at the block edge, no indent. Subsequent soft-wrapped lines are indented by 2em, creating the hanging indent effect.

interactive demo

Adjust indent

Indent size: 2em

The quick brown fox jumps over the lazy dog. This sentence wraps to demonstrate where the hanging indent kicks in on lines after the first.

text-indent: 2em hanging;

real-world use cases

Bibliography / references — text-indent: 3em hanging

Smith, J. A., & Jones, B. C. (2024). A very long title that wraps across multiple lines in a bibliography entry, showing the classic hanging indent style.

Doe, R. (2023). Another reference with a long enough title to wrap around and show the second line's indentation clearly.

Verse / poetry — text-indent: 2em hanging

A long line of poetry that happens to wrap in the reading column, where the continuation is indented to make the line break visible as a continuation.

code

/* Hanging indent: first line at block edge, subsequent lines indented */
p { text-indent: 2em hanging; }

/* Common use: bibliography list */
.references p {
  text-indent: 3em hanging;
  margin-bottom: 0.5em;
}

/* Feature detection */
@supports (text-indent: 1em hanging) {
  /* Chrome 146+ */
  p { text-indent: 2em hanging; }
}