javascript - レスポンシブ フォント サイズ nowrap

Question

次のように、画面全体に1行のテキストを表示したいと思います。

1. Width:100%
2. Fonts-sizeブラウザの幅に基づいて可能な最大
3. 一行のみ ( nowrap)
4. 与えられたfont-family

私の考えは、 hiddendivと randomを開始し、 jQueryfont-sizeを実行して「総当たり」で増減させ、その幅がブラウザの幅に近づくようにすることです。font-size

これを行う最善の方法はありますか？いくつかの例を見ることができれば素晴らしいです。ありがとう。

Answer 1

フォントの高さに対する比率としてテキストの幅を把握し、次のようなことを行います

var w = [parentElement].clientWidth; [textElement].style.fontSize = w*ratio;