text-indent: hanging

従来padding-leftとtext-indentを組み合わせたりgridやflexを用いて実装されていた2行目以降のインデントについて、hangingキーワードが全主要ブラウザで対応となった。
hangingの指定により「2行目以降が指定サイズでインデント」となる。

ただしChromium146(2026-03-10)からの対応となるため、あと一年程度はプログレッシブエンハンスメント扱いとするのが穏当か。

・indent_with_padding
indent_with_padding
indent_with_padding

・indent_with_hanging
indent_with_hanging
indent_with_hanging

.indent__past {
  padding-left: 1em;
  text-indent: -1em;
}

.indent__past__grid {
  display: grid;
  grid-template-columns:auto 1fr;
}

// text-indent: hanging を使用したぶら下げインデント
.indent__hanging {
  text-indent: 1em hanging;
}

◯参照
- MDN Web Docs - text-indent: hanging