text-indentのeach-lineとhangingキーワードでインデントを制御する
CSSのtext-indentプロパティにeach-lineとhangingキーワードが追加され、Baseline 2026で主要ブラウザすべてで利用可能になりました。改行後のインデントやぶら下げインデントを標準的な方法で実現できます。
はじめに
text-indentプロパティはブロック要素の最初の行にインデントを設定するおなじみのプロパティです。
しかし、従来は最初の行にしかインデントを適用できず、<br>による改行後の行やぶら下げインデントを実現するにはCSSのワークアラウンドが必要でした。
Chrome 146のリリースにより、each-lineとhangingの2つのキーワードが主要ブラウザすべてで利用可能になりBaseline 2026に加わりました。
これらのキーワードを使うことで、こうしたインデントの制御をシンプルに記述できるようになります。
text-indentプロパティのおさらい
text-indentプロパティは、ブロックコンテナの最初の行の先頭にインデント（字下げ）を追加します。
p {
text-indent: 2em;
}この指定では、段落の最初の行だけが2em分インデントされます。
each-lineキーワード
each-lineキーワードを指定すると、最初の行に加えて<br>などによる改行の後の各行にもインデントが適用されます。
自動折り返しによる改行には適用されません。
p {
text-indent: 2em each-line;
}これにより、<br>で区切られた各段落の先頭にインデントが入るようになります。
hangingキーワード
hangingキーワードはインデントの対象を反転させます。
通常は最初の行だけがインデントされますが、hangingを指定すると最初の行以外のすべての行がインデントされます。
p {
text-indent: 2em hanging;
}いわゆる「ぶら下げインデント」と呼ばれるレイアウトで、参考文献リストや用語集などで最初の行を目立たせたい場合に活用できます。
キーワードの組み合わせ
each-lineとhangingは組み合わせて使用できます。
p {
text-indent: 2em hanging each-line;
}この場合、最初の行と<br>による改行直後の行以外のすべての行にインデントが適用されます。
デモ
text-indent each-line / hangingのデモ
これはtext-indentプロパティのデモです。テキストのインデントがどのように適用されるかを確認できます。各キーワードの違いを比較してみてください。
これはtext-indentプロパティのデモです。テキストのインデントがどのように適用されるかを確認できます。各キーワードの違いを比較してみてください。
これはtext-indentプロパティのデモです。テキストのインデントがどのように適用されるかを確認できます。各キーワードの違いを比較してみてください。
text-indent: 2em;おわりに
text-indentのeach-lineとhangingキーワードを紹介しました。
従来、ぶら下げインデントを実現するにはpadding-leftとtext-indentの負の値を組み合わせるなどのテクニックが必要でした。
hangingキーワードにより、意図が明確なシンプルな記述で同じレイアウトを実現できるようになりました。