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

Div (1 行) 内に収まるようにフォントのサイズを変更する

このクエリでは、質問者はタイトル (<) のフォント サイズを動的に調整する方法を探しています。 ;h1>)

内要素の長さに関係なく、確実に 1 行に収まるようにします。重要な課題は、テキストが

からオーバーフローしたときを検出することにあります。 width.

CSS ソリューション (利用不可)

残念ながら、CSS にはこの効果を実現するための特定の属性がありません。このコンテキストでは、オーバーフロー プロパティだけでは十分ではありません。

JavaScript/jQuery ソリューション (利用可能)

この問題に対処するために、JavaScript/jQuery はソリューションを提供します。重要な概念は、特定のスタイル属性を持つ補助 DIV を作成することです:

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

この DIV は、タイトルのコンテンツの幅をテストするために使用されます。 JavaScript/jQuery のアプローチは次のとおりです。

1. タイトルのコンテンツを補助 DIV にコピーします。
2. 補助 DIV の初期フォント サイズを設定します。
3. 「」を入力します。 while" ループは、補助 DIV の幅が目的の幅と一致するまで反復されます。
4. それぞれの中で
5. ループが終了したら、計算されたフォント サイズを元のタイトル要素に設定します。

この手法により、次のことが保証されます。テキストは

内の 1 行に収まります。タイトルの長さを正確に制御する必要はありません。複数の反復が必要になる場合がありますが、幅係数を実装することでループを最適化し、反復数を大幅に減らすことができます。

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