JavaScript を使用して単一行の Div に合わせてフォントのサイズを変更するにはどうすればよいですか?

JavaScript を使用して Div を 1 行に収まるようにフォントのサイズを変更する

状況:

にタイトルが付いた記事があります。

CSS 解決策:

次のことを可能にする CSS 属性はありません。 div の幅に基づいてテキストのサイズを自動的に変更します。

JavaScript/jQuery解決策:

1. 次のスタイルで隠し div を作成します:

   position: absolute;
   visibility: hidden;
   white-space: nowrap;
   font-family: [same as the title's]

2. タイトル テキストを隠し div にコピーします。
3. 非表示の初期フォント サイズを設定しますdiv.
4. 幅が親 div の幅と一致するまで、非表示の div のフォント サイズをインクリメントする while ループを実装します。
5. 計算されたフォント サイズを元のタイトルに設定します。

最適化:

改善するためパフォーマンスを向上させるには、while ループを最適化して反復回数を減らすことができます。

1. 開始フォント サイズを設定します。
2. テスト div の幅を取得します。
3. 幅を計算します元の div とテスト div の間の係数。
4. フォント サイズではなく、この係数に基づいてフォント サイズを調整します。 1 単位ずつ増加/減少します。
5. テスト div の幅をテストします。

以上がJavaScript を使用して単一行の Div に合わせてフォントのサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。