Question

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

这是我正在使用的插件。当我在一个元素上调用它时，它会缩小字体大小，使其适合宽度为div的一行，但它不会让文本进入第二行并且也适合高度。宽度和高度都被定义，我提醒他们并看到它们，所以这不是问题。

可能出现什么问题？

Answer 1

span在大多数浏览器中没有宽度或高度。这只是你的特定浏览器很好，让你指定一个高度。

将范围更改为div，它应该按预期运行...

或者实际上，将跨度更改为块元素

style="display:block;"

这应该让您指定范围的尺寸

JQuery插件使用宽度而不是高度

1 个答案: