自动调整动态文本大小以填充固定大小的容器

小编典典

自动调整动态文本大小以填充固定大小的容器

html

我需要将用户输入的文本显示为固定大小的div。我想要的是自动调整字体大小，以使文本尽可能多地填充框中。

所以-如果div为400px x 300px。如果有人输入ABC，那么它确实是大字体。如果他们输入一个段落，那么它将是很小的字体。

我可能想从最大字体大小开始-也许是32px，并且当文本太大而无法容纳容器时，请缩小字体大小直到适合为止。

阅读 437

2020-05-10

共1个答案

小编典典

;(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插件，因此可能不尽如人意。指针当然是受欢迎的。

2020-05-10