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

autoshrink.js

(function($) {

    function getTextWidth($element) {
        var tester = $("<div/>").text($element.text())
			.css({ "position": "absolute", "float": "left", "white-space": "nowrap", "visibility": "hidden", "font": $element.css("font"), "text-transform": $element.css("text-transform"), "letter-spacing": $element.css("letter-spacing") })
			.appendTo($element.parent()),
			width = tester.innerWidth();
        tester.remove();
        return width;
    }

    function AutoShrinker($element) {
        this.$element = $element;
        this.$parent = $element.parent();
        this.initialFontSize = parseFloat($element.css("fontSize"));
        this.currentFontSize = this.initialFontSize;
        this.leftMarginRatio = parseFloat($element.css("marginLeft")) / this.initialFontSize;
        this.resize = function() {
            var maxWidth = this.$parent.width(),
				newSize = this.currentFontSize * (maxWidth / getTextWidth(this.$element));
            newSize = newSize > this.initialFontSize ? this.initialFontSize : newSize;
            this.$element.css({
                "fontSize": newSize,
                "marginLeft": newSize * this.leftMarginRatio
            });
            this.currentFontSize = newSize;
        };
    }

    $.fn.autoshrink = function() {
        return this.each(function() {
            var shrinker, $this = $(this);
            $this.data("autoshrinker", shrinker = new AutoShrinker($this));
            shrinker.resize();
            $(window).on("resize", function() {
                shrinker.resize();
            });
        });
    };
})(jQuery);

example.html

<script>
    $("h1").autoshrink();
</script>

<div>
    <h1>Shrink Me</h1>
</div>

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..