v146 · CSS · Each-Line Demo

Each-Line Demo

The each-line keyword extends text-indent so the indent applies after every forced line break — not just at the very start of the block. Forced breaks include   elements and newlines in pre content. Without each-line, only the very first line of the block is indented.

Chrome 146 required for text-indent: N each-line. Older browsers apply a standard first-line-only indent.

text with breaks

The block below contains three lines separated by  . Standard indent applies only to line 1; each-line applies to all three.

text-indent: 2em (standard)

First line — indented.
Second line after — NOT indented.
Third line after — NOT indented.

text-indent: 2em each-line

First line — indented.
Second line after — also indented.
Third line after — also indented.

poetry / verse formatting

Verse is commonly indented by stanza. each-line applies the indent to each line in the verse block, while a larger indent on alternating lines is traditionally achieved with spaces — now replaceable with more structured CSS.

Without each-line

Shall I compare thee to a summer's day?
Thou art more lovely and more temperate:
Rough winds do shake the darling buds of May,
And summer's lease hath all too short a date.

With text-indent: 1.5em each-line

Shall I compare thee to a summer's day?
Thou art more lovely and more temperate:
Rough winds do shake the darling buds of May,
And summer's lease hath all too short a date.

combined: hanging + each-line

The two keywords can be combined. The resulting indent is "hanging" (applied to every line except the first in each text run) AND "each-line" (applied at the start of each forced break). Effect: after each  , a new run starts — and that run's first line is not indented (hanging), while its subsequent wrapped lines are.

hanging only

First line — not indented.
Second line after br — indented (hanging applies to all but first).
Third line — also indented.

hanging + each-line

First line — not indented.
After br: this is a new "first" line — not indented.
A third line continues the run — indented.

code

/* Standard: first line only */
p { text-indent: 2em; }

/* each-line: applies after every forced break (<br>, pre newlines) */
p { text-indent: 2em each-line; }

/* hanging + each-line: hanging style resets at every forced break */
p { text-indent: 2em hanging each-line; }

/* Good for verse / poetry formatting */
.verse {
  white-space: pre-line; /* respect newlines in source */
  text-indent: 1.5em each-line;
  font-style: italic;
  line-height: 1.9;
}