テキストを一行の時は中央寄せ、二行以上の時は左よせにする方法

今回対応したいこと

• テキストを表示する際一行の時は中央寄せ、二行の時は左よせにしたい。
• テキストごとにハードコーディングすれば簡単にできるが動的にテキストが変わるため一つのクラスでどちらにも対応できるようにする。

対応方法

今回は margin-inline と max-inline-size の組み合わせで対応したいと思います。

.text-oneline-center {
  margin-inline: auto;
  max-inline-size: max-content;
}

サンプル

サンプル

サンプルを見てもらうとわかる通り要素内にテキストが収まる場合は左右に margin をとり中央寄せになります。
要素内に収まらない場合は marginはないので親要素の text-aline に準拠した出力となります。

参考

CSSでテキストが1行に収まるときだけ中央寄せする

最後に

今回もかなり細かいテクニックにはなりますが、ぜひ活用してみてください。