☰

固定サイズのコンテナを埋めるために動的テキストのサイズを自動調整する 質問する

tag-icon • tag-icon jquery html css
固定サイズのコンテナを埋めるために動的テキストのサイズを自動調整する 質問する

ユーザーが入力したテキストを固定サイズの div に表示する必要があります。テキストがボックスをできるだけ埋めるように、フォント サイズが自動的に調整されるようにしたいです。

つまり、div が 400 ピクセル x 300 ピクセルの場合、誰かが ABC と入力すると、非常に大きなフォントになります。段落を入力すると、小さなフォントになります。

おそらく、最大フォント サイズ (おそらく 32 ピクセル) から始めて、テキストが大きすぎてコンテナーに収まらない場合は、収まるまでフォント サイズを縮小します。

ベストアンサー1

最終的にこうなりました:

プラグインへのリンクは次のとおりです:https://plugins.jquery.com/textfill/
ソースへのリンク:テキストフィル

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});

私のHTMLは次のようになります

<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>

おすすめ記事