Fit text perfectly inside a div (height and width) without affecting the size of the div

Question

I apologise in advance as I know this question has come up many times before but I just can't seem to find the right solution (and believe me I've tried a few!)

Basically it's the old "Fit text perfectly inside a div without affecting the size of the div". And unless I'm a complete numpty, I believe CSS has no way of doing this. So what I mean basically is rather than doing something like:

#someDiv { font-size: 12px; } 

or...

#someDiv { font-size: 1em; } 

...I want to be able to do something like this:

#someDiv { font-size: fluid; } 

...meaning that whatever text this div contains, scale it to fit perfectly from left to right and top to bottom with no overflow or whitespace.

After trawling through countless websites looking for this CSS solution, I've now accepted that CSS isn't capable of this ...so, enter jQuery.

I've found several jQuery solutions online but they will only scale the text to fit the width, but I want it to scale to the height as well. So effectively I want to say to jQuery:

"jQuery, find $(this) div and whatever text is inside it I want you to scale it so that it fills the entire height and width of the div as tightly as possible".

In case I haven't explained myself very well, I've attached a graphic explaining the problem I'm facing and the solution I'm looking for.

Any help would be much appreciated. Thank you.

Answer 1

I was wanting something similar myself recently:

<div class='container'>     <div class='no-resize'>This text won't be resized and will go out of the div.</div>     <div class='resize'>This text will be resized and wont go out of the div.</div> </div> 

And

.no-resize, .resize {     width: 100px;     height: 50px;     border: 1px solid #000;     color: #000;     float: left;     margin-left: 10px;     font-size: 15px } 

Fiddler at jsfiddle.net/mn4rr/1/.

Answer 2

Here's the same answer, but in Javascript

var autoSizeText;  autoSizeText = function() {   var el, elements, _i, _len, _results;   elements = $('.resize');   console.log(elements);   if (elements.length < 0) {     return;   }   _results = [];   for (_i = 0, _len = elements.length; _i < _len; _i++) {     el = elements[_i];     _results.push((function(el) {       var resizeText, _results1;       resizeText = function() {         var elNewFontSize;         elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';         return $(el).css('font-size', elNewFontSize);       };       _results1 = [];       while (el.scrollHeight > el.offsetHeight) {         _results1.push(resizeText());       }        return _results1;     })(el));   }   return _results; };  $(document).ready(function() {   return autoSizeText(); }); 

By the way...if you ever need to convert coffeescript to javascript, just go to js2coffee.org