v146 · CSS · Hanging Indent Demo

Hanging Indent Demo

A hanging indent is the opposite of a standard first-line indent: the first line aligns to the left edge while all subsequent lines are pushed right. Common in bibliographies, glossaries, and hanging-bullet lists. The hanging keyword (Chrome 146) makes this a single CSS property value.

Chrome 146 required for text-indent: N hanging. Older browsers ignore the keyword and apply a standard first-line indent instead.

first-line vs hanging comparison

Indent size: 2.5em

text-indent: 2.5em (standard)

The standard text-indent property indents only the first line of a paragraph, creating the typographic convention familiar from printed books and long-form articles. The second and subsequent lines align to the left edge of the container, giving the paragraph a natural shape that guides the eye from line to line.

text-indent: 2.5em hanging (Chrome 146)

With the hanging keyword, the first line aligns to the left edge while all subsequent lines are indented. This reversal creates a left-protruding label that works well for bibliographies, glossary entries, and any list where an identifying label hangs into the left margin.

practical use cases

Bibliography

Smith, J. (2024). Web Platform Features in Practice. Oxford University Press. DOI: 10.1093/example/web2024.

Jones, A., & Lee, B. (2023). Responsive Typography at Scale. Journal of Web Design, 12(3), 45–67.

García, M. (2025). CSS Text Module Level 4: A Practical Guide. Retrieved from https://example.com/css-text-4.

Glossary / Dictionary

hanging indent

A typographic style where the first line of a paragraph is flush left while all subsequent lines are indented, creating a protruding label in the left margin. Used in dictionaries, bibliographies, and bullet lists with long labels.

first-line indent

The more common paragraph style where only the first line is indented. Signals the start of a new paragraph without a blank line gap.

old hack vs new property

Before Chrome 146 — padding/margin hack

Requires padding-left and a negative text-indent to simulate hanging. Fragile when the container width changes or when combined with padding-based borders.

p {
  padding-left: 2.5em;
  text-indent: -2.5em;
}

Chrome 146 — hanging keyword

A single CSS property value. No fragile padding/margin coupling. Works naturally with responsive widths and any container box model.

p {
  text-indent: 2.5em hanging;
}