CSS:文字が幅いっぱいになるまでは中央揃え、幅より長くなったときは左揃えにする方

タイトルの通りです。

●NG例

この文字は中央揃えで
    す。

文字を中央揃えにしたいけど、改行されて上記のようになるのは嫌なので折り返されるときは左揃えにしたい、という場合の指定です。

●HTML

<div class="box">
  <p class="caption">テキストが入る。</p>
</div>

●CSS

.caption {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
}

親要素 .box には何かしらの幅が設定されるようにしてください。
それより狭い場合は .caption の幅が文字にフィットして左右にマージンがつくため、中央揃えのようになります。

このブログ記事について

このページは、gravity-worksが2026年11月 4日 15:15に書いたブログ記事です。

ひとつ前のブログ記事は「離散アニメーション」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

​