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

DDD
リリース: 2024-11-27 17:05:12
オリジナル
674 人が閲覧しました

How Can I Automatically Adjust Text Size to Fit Within a Constrained 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート