text-indent: each-line
text-indent: each-line はデフォルトの最初の行だけでなく、<br> や改行による強制改行後のすべての行にもインデントを適用します。詩や歌詞、法的文書など、各行にインデントが必要なフォーマットに有用です。従来はJavaScriptやマークアップの工夫で実現していた効果をCSSのみで達成できます。
概要
text-indent: each-line はデフォルトの最初の行だけでなく、<br> や改行による強制改行後のすべての行にもインデントを適用します。詩や歌詞、法的文書など、各行にインデントが必要なフォーマットに有用です。従来はJavaScriptやマークアップの工夫で実現していた効果をCSSのみで達成できます。
対応ブラウザ
デスクトップ
Chrome 146+
Edge 未対応
Safari 15+
Firefox 121+
モバイル
Chrome Android 146+
Safari iOS 15+
Firefox Android 121+
基本構文
CSS
.poem {
text-indent: 2em each-line;
}実務での使いどころ
-
詩や歌詞のフォーマット
各行の先頭にインデントを適用し、詩や歌詞の伝統的な組版レイアウトを実現します。
注意点
- ブラウザサポートが限定的であり、Edge ではまだサポートされていません。
アクセシビリティ
- 各行のインデントが過度に大きいとコンテンツの読みやすさが低下するため、適切な値を設定してください。