☰

動的な文字数に基づいてフォントサイズをレスポンシブにする純粋な CSS 質問する

tag-icon • tag-icon css
動的な文字数に基づいてフォントサイズをレスポンシブにする純粋な CSS 質問する

これは JavaScript で簡単に解決できることはわかっていますが、純粋な CSS ソリューションにのみ興味があります。

テキストが常に固定の div に収まるように、テキストのサイズを動的に変更する方法が必要です。サンプル マークアップは次のとおりです。

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

コンテナの幅をems で指定し、 にfont-sizeその値を継承させることで、これが可能になるのではないかと考えていました。

ベストアンサー1

注: このソリューションは、コンテンツの量ではなくビューポートのサイズに基づいて変化します。

VW 単位を使用するとこれが可能であることがわかりました。これは、ビューポートの幅を設定するための単位です。従来のブラウザのサポートがないなど、いくつかの欠点がありますが、これは間違いなく真剣に使用を検討する価値があります。さらに、次のようにして、古いブラウザ用のフォールバックを提供することもできます。

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

http://css-tricks.com/viewport-sized-typography/そしてhttps://medium.com/design-ux/66bddb327bb1

おすすめ記事