Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

text-indent: each-line

text-indent: each-line はデフォルトの最初の行だけでなく、<br> や改行による強制改行後のすべての行にもインデントを適用します。詩や歌詞、法的文書など、各行にインデントが必要なフォーマットに有用です。従来はJavaScriptやマークアップの工夫で実現していた効果をCSSのみで達成できます。

字下げ強制改行

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.text-indent.each-line
146
146
121
15
146
15
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.poem {
  text-indent: 2em each-line;
}

ライブデモ

each-line 2em

CSS Each-line 2em demo.

プレビュー全画面表示

each-line 1em

CSS Each-line 1em demo.

プレビュー全画面表示

Normal indent

CSS Normalindent demo.

プレビュー全画面表示

実務での使いどころ

  • 詩や歌詞のフォーマット

    各行の先頭にインデントを適用し、詩や歌詞の伝統的な組版レイアウトを実現します。

注意点

  • ブラウザサポートが限定的であり、Edge ではまだサポートされていません。

アクセシビリティ

  • 各行のインデントが過度に大きいとコンテンツの読みやすさが低下するため、適切な値を設定してください。

参考リンク