JavaScript
<<script type="text/javascript">
$.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;
}
$('div#my_text_box').textfill({ maxFontPixels: 100 });
<</script>
CSS
#my_text_box {
border: 1px solid red;
height: 50px;
width: 70px;
}
HTML
<div id="my_text_box">
<span>Hello World</span>
</div>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.