制約された Div 内のテキスト サイズの微調整: 自動ソリューション
背景画像に div があり、オーバーレイしたい場合を想像してください。限定された div 内に収まるようにフォント サイズを自動的に調整するテキスト。この質問は、この一般的な問題の解決策を求めており、ここで包括的な回答を提供します。
jQuery の実装: ステップバイステップ ガイド
目的を達成するにはこの対話型の例で示すように、jQuery ベースのソリューションを提案します。 http://jsfiddle.net/MYSVL/2/.
まず、テキスト コンテンツを含む div コンテナを作成します。
<div>
次に、div コンテナに固定サイズを適用します。 :
#fitin { width: 300px; height: 100px; border: 1px solid black; overflow: hidden; font-size: 1em; }
テキスト サイズを動的に調整するために、次の JavaScript を使用します。コード:
$(function() { while( $('#fitin div').height() > $('#fitin').height() ) { $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" ); } });
このコードは、テキストがコンテナ div の指定された高さ内に収まるまで内部 div のフォント サイズを繰り返し小さくし、制約されたスペース内での最適な読みやすさとコンテンツ表示を保証します。
以上が制約された Div 内に収まるようにテキスト サイズを自動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。