制約された Div 内に収まるようにテキスト サイズを自動的に調整するにはどうすればよいですか?

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