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

単一行に Div が収まるようにフォント サイズを調整する

質問:

方法テキスト要素のフォントのサイズを動的に変更して、指定した div タグ内に収まり、折り返されないようにすることはできますか?複数行?

答え:

CSS 解決策:

CSS だけではこの機能を実現できません。

JavaScript解決策:

方法 1: Javascript と jQuery を使用する

1. 元のテキスト要素 (フォントなど) と同様の CSS プロパティを持つ隠し div を作成します。 -family、位置: 絶対、可視性: 非表示)。
2. 元の要素からテキストをコピーします。隠し div。
3. 隠し div の初期フォント サイズを設定します。

4. 次のループを入力します。

   • 隠し div の幅を取得します。 .
   • 元の希望の幅と比較します。 div.
   • 希望の幅になるまで、設定された係数または単位で非表示の div のフォント サイズを調整します。
5. 計算されたフォント サイズを元のテキストに設定しますelement.

方法 2: While の最適化ループ

ループの反復回数を最小限に抑えるには:

1. 開始フォント サイズを設定します。
2. 非表示の div の幅を取得します。
3. 元の div と非表示の div の幅の比率を計算します。
4. 調整非表示 div のフォント サイズを 1 単位ずつ増減する代わりに、この係数で調整します。
5. 非表示 div の幅をテストします。

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