Resize text in a fixed size div to fit

Question

I have a <div> which is 400px wide and 100px high. I want to put a heading in that which will vary in length, and it will take up two lines in the <div> if it is long enough (i.e the <div> will have a default font size of 50px). I want to have the text start at 50px, and have it to shrink down if the text is too long to fit in to the box on two lines.

How do I go about this? I've been playing around with Javascript for a few hours but I am not able to come up with or find anything. All I can find is how to do this for text on one line.

trying to understand: do you want to have an header with fixed height and text vertically-aligned both for 1 and 2 lines? — Fabrizio Calderan, Jul 31 '13 at 09:19
try this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=nowrap — Huei Tan, Jul 31 '13 at 09:19
or even white-space : http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space — Huei Tan, Jul 31 '13 at 09:20
Looks a bit duplicate of http://stackoverflow.com/questions/4165836/javascript-scale-text-to-fit-in-fixed-div — JP Hellemons, Jul 31 '13 at 10:37
possible duplicate of [Auto-size dynamic text to fill fixed size container](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) — Michel Ayres, Oct 29 '13 at 17:48

score 6 · Accepted Answer · answered Jul 31 '13 at 09:39

You will need some JavaScript to solve this. This is my example markup

<div style="width: 400px; border: 1px solid black;">
    <span style="display: inline-block; font-size: 50px;">This is my text that I want to fit</span>
</div>

I gave the span the display value inline-block so I could measuer its width.

Then the following jquery based script will make it shink until it's just a little bit too small.

$(function() {
    var span = $('span');
    var fontSize = parseInt(span.css('font-size'));

    do {
        fontSize--;
        span.css('font-size', fontSize.toString() + 'px');
    } while (span.width() >= 400);
});

Check out the JSFiddle for demonstration: http://jsfiddle.net/gEjTz/

Resize text in a fixed size div to fit

1 Answers1