[解決済み] 純粋なCSSで動的な文字量に応じたフォントサイズをレスポンシブにする

2022-03-15 03:14:33

質問

Javascriptでかなり簡単に解決できることは知っていますが、純粋なCSSの解決策にしか興味がありません。

テキストを動的にリサイズして、常に固定された div に収まるようにしたいのですが。以下は、マークアップの例です。

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

もしかしたら、コンテナの幅をemsで指定して、font-sizeにその値を継承させれば可能なのではと思ったのですが、いかがでしょうか？

注：この解決策はビューポートサイズによって変わり、コンテンツの量ではありません

VW単位で可能なことを今知りました。これは、ビューポート幅の設定に関連する単位です。レガシーブラウザに対応していないなどの欠点はありますが、これは間違いなく真剣に利用を検討すべきものです。さらに、このように古いブラウザのためのフォールバックを提供することができます。

p {
    font-size: 30px;
    font-size: 3.5vw;
}