jquery - Resize text in a fixed size div to fit -

i have <div> 400px wide , 100px high. want put heading in vary in length, , take 2 lines in <div> if long enough (i.e <div> have default font size of 50px). want have text start @ 50px, , have shrink down if text long fit in box on 2 lines.

how go this? i've been playing around javascript few hours not able come or find anything. can find how text on 1 line.

you need javascript solve this. example markup

<div style="width: 400px; border: 1px solid black;">     <span style="display: inline-block; font-size: 50px;">this text want fit</span> </div> 

i gave span display value inline-block measuer width.

then following jquery based script make shink until it's little bit small.

$(function() {     var span = $('span');     var fontsize = parseint(span.css('font-size'));      {         fontsize--;         span.css('font-size', fontsize.tostring() + 'px');     } while (span.width() >= 400); }); 

check out jsfiddle demonstration: http://jsfiddle.net/gejtz/