v146 · CSS · Each-Line Keyword Demo

Each-Line Keyword Demo

The each-line keyword makes text-indent apply to the first line of every paragraph and to the first line after each hard line break (from <br> or a forced line break). Soft-wrapped continuation lines are unaffected.

Key distinction: each-line only triggers on hard line breaks — <br> tags and forced line breaks in pre elements. Soft wrapping (where the browser breaks long lines to fit the container) does not restart the indent.

hard break vs soft wrap

text-indent: 0

Line one (no indent).
After hard break (no indent).
After another break.
baseline — no indentation at all

text-indent: 2em

Line one (indented).
After hard break (NOT indented).
After another break (NOT indented).
default — only very first line indented

text-indent: 2em each-line

Line one (indented).
After hard break (indented ✓).
After another break (indented ✓).
each-line — first line after every hard break

interactive demo

Live editor — see each-line in action

2em 
First line of the paragraph.
Second line after a hard break.
Third line after another hard break.
This very long line will soft-wrap but the soft-wrapped continuation does not restart the indent — only hard breaks do.
text-indent: 2em each-line;

which lines get indented

Line type text-indent: 2em text-indent: 2em each-line text-indent: 2em hanging
First line of block yes yes no
After hard break (<br>) no yes no
Soft-wrapped continuation no no yes

code

/* each-line: first line AND after every hard break */
p { text-indent: 2em each-line; }

/* works in pre elements too — every newline in source = hard break */
pre { text-indent: 2em each-line; }

/* Combined with hanging for uncommon typographic effects */
p { text-indent: 2em hanging each-line; }

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

see also