Question

If I have a div that is x high, how can I make the text inside of it the max it can be assuming that it can only take up one line.

While I would prefer a CSS answer, any jquery/javascript answers are accepted just because I need this to work either way 🙂

Answer 1

Based on Aleks G’s comment, this example shows how you would incrementally increase the font size until you’d reached your max:

HTML

<div>
    <span>This is some text</span>
</div>

CSS

div {
  width: 300px;
}

span {
  display: inline-block;   
}

jQuery

var $span = $('span');
var $div = $('div');

while($span.width() < $div.width()){
    $span.css({fontSize: "+=1"});   
}
$span.css({fontSize: "-=1"});  

If you wanted to eliminate any stuttering as the font size was being changed, you could hide the text until the while loop was complete.