text-indent: each-line/hangingをつかったテキストレイアウト

text-indentで段落の文字下げをするで、段落先頭のも字下げレイアウトの方法を紹介した。現在では、さらにeach-lineとhangingという値もサポートされ、雑誌風や小説風のレイアウトが可能になった。

p {
  text-indent: 1ic; /** 1文字分の字下げ */

  text-indent: 1ic each-line;
  text-indent: 1ic hanging;
}

each-lineは、強制改行に続くあとの行も先頭業と同様にも字下げする。 ただし、横幅いっぱいになり折り返しした場合は文字下げしない。書籍（小説など）でよく使われるレイアウトになる。

hangingは、インデントされる行が逆になり先頭業以外の行を文字下げする。 text-indent: -1ic;との違いは、ネガティブな値を指定するとコンテナ要素からはみ出すのに対し、1ic hangingはコンテナ内で文字下げるする点。

デモ