text-indent: hanging
text-indent: hanging は最初の行を通常の位置に置き、2行目以降をインデントする「ぶら下げインデント」を実現します。参考文献リスト、用語集、辞書エントリーなどのフォーマットに最適です。従来の負のtext-indentとpadding-leftの組み合わせを単一のCSS宣言で置き換えます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.text-indent.hanging | 146 | 146 | 121 | 15 | 146 | 15 |
基本構文
CSS
.bibliography {
text-indent: 2em hanging;
}ライブデモ
実務での使いどころ
-
参考文献リスト
学術論文の参考文献リストで、2行目以降をぶら下げインデントし、著者名が目立つフォーマットにします。
注意点
- ブラウザサポートが限定的であり、Edge ではまだサポートされていません。フォールバックとして負の text-indent + padding-left を使用してください。
アクセシビリティ
- ぶら下げインデントのフォーマットは、リスト構造を視覚的に明確にし、コンテンツのスキャンしやすさを向上させます。