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") })
			.appendTo(document.body),
			width = tester.width();
		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.resize = function() {
			var maxWidth = this.$parent.width(),
				newSize = this.currentFontSize * (maxWidth / getTextWidth(this.$element) - 0.1);
			newSize = newSize > this.initialFontSize ? this.initialFontSize : newSize;
			this.$element.css({ "fontSize": newSize });
			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>

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