Enlarge / shrink text to dynamically fill a div using jquery?

Question

I've seen a few similar posts and have tried out the answers given, but I can't seem to get this to work (for me anyway).

Basically I'm looking for something that will automatically resize (enlarge or shrink) my text to fit a set width div over multiple lines. Where line 1 is the largest, line 2 smaller and line 3 smallest text sizes and (hopefully) justifying the text as it goes along.. If that makes any sense at all?

Any help would be appreciated! :)

EDIT: I forgot to mention it will only run over 2-3 lines at the most with a set div width of 286px.

I've tried the following codes:

;(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);
$(document).ready(function(e){
  $('.testimonial').textfill({ maxFontPixels: 36 });
});

Auto-size dynamic text to fill fixed size container

$( '.testimonial' ).each(function ( i, box ) {
    var width = $( box ).width(),
        html = '<span style="white-space:nowrap"></span>',
        line = $( box ).wrapInner( html ).children()[ 0 ],
        n = 100;
    $( box ).css( 'font-size', n );
    while ( $( line ).width() > width ) {
        $( box ).css( 'font-size', --n );
    }
    $( box ).text( $( line ).text() );
  });

JavaScript Scale Text to Fit in Fixed Div

What have you tried? http://mattgemmell.com/2008/12/08/what-have-you-tried/ Can we see what you have so far? — andrewdotnich, Jun 27 '12 at 05:14
Also, it's not exactly clear what you're trying to do… Does each line have to have its own specific font size? — andrewdotnich, Jun 27 '12 at 05:15
Yeh it's hard to explain.. line 1 to be the largest font with 3-4 words, line 2 to be 4-6 words, slightly smaller and so forth.. but hopefully they can be justified too.. — SoulieBaby, Jun 27 '12 at 05:18

Control Freak · Accepted Answer · 2012-06-27T05:23:49.613

You would need to code this yourself based on your description, something like this should work:

Get the size of the div using .innerWidth() and .innerHeight()
Based on your own mathematical formula, you would set a tolerance on how big you want the font size to be depending on the size of the wrapping div. Toggle the font size using $.css('font-size','12px'); , etc.

So you would do it like this:

 // get the size of the div
 var w = $('div').innerWidth();
 var h = $('div').innerHeight();

 // your own formula to your liking
 if (w >= 100) { fontsize = 11 }
 elseif (w >= 200) { fontsize = 12 }
 else { fontsize = 10 }

 //text to resize
 $('div span').css('font-size', fontsize + 'px');

Or maybe there is a plugin for it, try google.

Enlarge / shrink text to dynamically fill a div using jquery?

1 Answers1