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 サイトの他の関連記事を参照してください。

JavaScript jquery css for while Length Property copy number this overflow issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：SVG 背景画像が Firefox の疑似要素に表示されないのはなぜですか?次の記事：SVG 背景画像が Firefox の疑似要素に表示されないのはなぜですか?

関連記事

続きを見る

• CSSを書くときにBorderについて注意すべきことまとめ
• 複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流
• マーキーの詳細な使用状況分析
• CSSタイトル行の実装（行削除効果による行削除）
• CSS3 におけるグレースフル デグラデーションとプログレッシブ エンハンスメントの違い