Responds to window resize events. Max font size taken from initial font size (specify with CSS).

jquery.textfill.js

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("font-size"), 10),
                multiplier = maxWidth/ourText.width();
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && fontSize > maxFontSize) ? 
                    maxFontSize : 
                    (fontSize*(multiplier-0.1))
            );
        });
    }
})(jQuery);

beautiful, saved me a ton of time when other solutions couldn't. i modified a bit to add some extra functionality but this was exactly what i was looking for. thanks alot, it's appreciated.

Doesn't work in IE8 -- calculates a font size of 0; Trying to debug and will post back if I find a solution.

this is great. thanks. saved me so much time.

Just what I needed. Thanks!

hy any update for this? i use http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js

hey, found an issue with this. it doesn't work in Firefox because "font": $element.css("font"), is failing.

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), and so on.

here is a solution that seems to be working for me.
changing:

"font": $element.css("font"),

to:

"font-style": $element.css("font-style"),
"font-variant": $element.css("font-variant"),
"font-weight": $element.css("font-weight"),
"font-stretch": $element.css("font-stretch"),
"font-size": $element.css("font-size"),

Thanks! This is exactly what I was looking for. Super simple and easy to use!

Thanks for this easy solution!

I needed a small improvement for live editing (like an live preview text from an input field). May someone need it, too :)

$.fn.autoshrink = function(eventdata) {
        return this.each(function() {
            var shrinker, $this = $(this);
            $this.data("autoshrinker", shrinker = new AutoShrinker($this));
            shrinker.resize();
            $(window).on("resize", function() {
                shrinker.resize();
            });
            if(eventdata != null && eventdata != undefined && eventdata != "null"){
                $(eventdata[0]).on(eventdata[1],function(e){
                    shrinker.resize();
                });
            }
        });
    };

Call example: $(id+'>h4').autoshrink(['input#id','keyup']);

Sorry for not the cleanest code, isn't my main language..