JQuery plugin working with width but not height

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

This is the plugin I'm using. When I call it on an element, it lessens the font size so it fits on one line in the div width wise, but it's not letting the text go onto the second line and fit height-wise as well. Both width and height are defined, I alerted them and saw them, so that's not the issue.

What could be wrong?

span does not have width or height in most browsers. It's just your particular browser being nice and letting you specify a height.

Change the span to a div and it should behave as expected...

Or actually, change the span to a block element

style="display:block;"

That should let you specify dimensions for the span