Question

I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.

So – If the div is 400px x 300px. If someone enters ABC then it’s really big font. If they enter a paragraph, then it would be a tiny font.

I’d probably want to start with a maximum font size – maybe 32px, and while the text is too big to fit the container, shrink the font size until it fits.

Answer 1

This is what I ended up with:

Here is a link to the plugin: https://plugins.jquery.com/textfill/
And a link to the source: http://jquery-textfill.github.io/

;(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() {     $('.jtextfill').textfill({ maxFontPixels: 36 }); }); 

and my HTML is like this

<div class='jtextfill' style='width:100px;height:50px;'>     <span>My Text Here</span> </div>