[解決済み】動的なテキストを固定サイズのコンテナいっぱいに自動サイズ調整する

質問

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

つまり - divが400px x 300pxである場合。 もし誰かがABCと入力したら、それは本当に大きなフォントです。 もし誰かが段落を入力したら、それは小さなフォントになります。

最大フォントサイズを32pxくらいから始めて、テキストが大きすぎてコンテナに収まらない場合は、収まるまでフォントサイズを縮小するのがいいと思います。

どのように解決するのですか？

ありがとうございます。 攻撃 . jQueryを使いたかったんです。

正しい方向を示してくれたので、最終的にこうなったんだ。

プラグインのリンクはこちらです。 https://plugins.jquery.com/textfill/

そして、ソースへのリンク。 http://jquery-textfill.github.io/

;(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>

これは私の最初のjqueryプラグインなので、たぶんいい加減なものだと思います。ご指摘は確かに歓迎します。