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 |
基本構文
CSS
.poem {
text-indent: 2em each-line;
} ライブデモ
実務での使いどころ
-
詩や歌詞のフォーマット
各行の先頭にインデントを適用し、詩や歌詞の伝統的な組版レイアウトを実現します。
注意点
- ブラウザサポートが限定的であり、Edge ではまだサポートされていません。
アクセシビリティ
- 各行のインデントが過度に大きいとコンテンツの読みやすさが低下するため、適切な値を設定してください。