0

I have a defined style for div with fixed width and the text inside the div could have different lengths, like in this example. Is there any method using CSS and/or JS to adjust the text size in such a way that it will stay in bounds of the container?

haynar
  • 5,961
  • 7
  • 33
  • 53

1 Answers1

3

this may work for you, try this

var originalFontSize = 12;

var divWidth = $('.cell').width();

$('.cell span').each(function(){

    var spanWidth = $(this).width();

    var newFontSize = (divWidth/spanWidth) * originalFontSize;

    $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});

});​
Shreedhar
  • 5,502
  • 3
  • 22
  • 27
  • Was about to post something similar, but your solution is more efficient. The downside is though that there is no threshold and the `veeeeeery looooooong text` becomes illegible. – Torsten Walter Aug 14 '12 at 10:59