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