Fit text width to div width

Question

SetBoxText = function(Box, Text) {


if(! Website.Connected) {
        return false;
    }

    if(Box == null || ! Box.Created) {
        return false;
    }

    if(Box.Text == Text) {
        return false;
    }

    Box.Text = Text;

    UpdateBox(Box);
    // To avoid constant updating.
    for(var LetterPos = 0; LetterPos < Box.Letter.length; LetterPos++) {
        Box.Element.removeChild(Box.Letter[LetterPos].Element);
    }

    Box.Letter = [];

    var
        Letter = " ",
        Element = null,
        FontSize = 0
    ;

    for(var LetterPos = 0; LetterPos < Box.Text.length; LetterPos++) {
        Letter = Box.Text[LetterPos];
        Element = document.createElement("font");

        Box.Element.appendChild(Element);

        Box.Letter[LetterPos] = {};
        Box.Letter[LetterPos].Letter = Letter;
        Box.Letter[LetterPos].Element = Element;

        Box.Letter[LetterPos].Element.style.fontFamily = Box.Font;
        Box.Letter[LetterPos].Element.style.textAlign = "center";
        Box.Letter[LetterPos].Element.innerHTML = Box.Letter[LetterPos].Letter;

        FontSize = 1;
        Box.Letter[LetterPos].Element.style.fontSize = FontSize + "px";

        while(Box.Letter[LetterPos].Element.offsetWidth < (Box.Element.offsetWidth / Box.Text.length)) {
            FontSize++;
            Box.Letter[LetterPos].Element.style.fontSize = FontSize + "px";
        }

        while(Box.Letter[LetterPos].Element.offsetWidth > (Box.Element.offsetWidth / Box.Text.length)) {
            FontSize--;
            Box.Letter[LetterPos].Element.style.fontSize = FontSize + "px";
        }

        Box.Letter[LetterPos].Element.style.width = Box.Letter[LetterPos].Element.offsetWidth + "px";
        Box.Letter[LetterPos].Element.style.height = Box.Letter[LetterPos].Element.offsetHeight + "px";
    }
    return true;

}

I have this function ^ up there. What it's supposed to do is create a font tag for every letter in the Text region. While it does that, it's supposed to fit itself into it's parent's width Box.Element. What's happening is my browser freezes if I try to run this function. When I comment out the while statements, this runs but I'm stuck with 1px size font.

I don't want to use jQuery.

Please help me =]

Edit: I've also noticed if I switch the tags from font to div, it will make it, but only vertically, and when I do Element.style.display = "inline-block"; to the div it will do the same as the font.

Edit2: I changed the while loops to a for loop:

    for(var FontSize = 1; FontSize < 100; FontSize++) {
        if(Box.Letter[LetterPos].Element.offsetWidth < (Box.Element.offsetWidth / Box.Text.length)) {
            Box.Letter[LetterPos].Element.style.fontSize = FontSize + "px";
        }
    }

This runs but some of the letters too big and some too small.

Answer 1

i hope this helps, considering that your browser is hanging, i did a small test with a for loop nesting a while loop, my browser hanged, too..

i hope this could be the solution to your problem, using the keyword break.

while(Box.Letter[LetterPos].Element.offsetWidth < (Box.Element.offsetWidth / Box.Text.length)) {
FontSize++;
Box.Letter[LetterPos].Element.style.fontSize = FontSize + "px";
break;   // break out of loop when condition is met
}

while(Box.Letter[LetterPos].Element.offsetWidth > (Box.Element.offsetWidth / Box.Text.length)) {
FontSize--;
Box.Letter[LetterPos].Element.style.fontSize = FontSize + "px";
break;
}