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;

}

我有这个功能^那里。它应该做的是为Text区域中的每个字母创建一个字体标记。虽然这样做，但它应该适合它的父母宽度Box.Element。如果我尝试运行此功能，我的浏览器会冻结的是什么。当我对while语句进行注释时，会运行，但我仍然坚持使用1px大小的字体。

我不想使用jQuery。

请帮助我=]

修改我还注意到，如果我将标签从字体切换到div，它会成功，但只能垂直，当我做Element.style.display =＆＃34; inline-block＆＃34 ;;对于div，它将与字体一样。

Edit2：我将while循环更改为for循环：

    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";
        }
    }

这会运行，但有些字母太大而有些太小。

Answer 1

我希望这会有所帮助，考虑到你的浏览器正在挂起，我做了一个小测试，使用for循环嵌套了一个while循环，我的浏览器也挂了..

我希望这可以解决您的问题，使用关键字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;
}

使文本宽度适合div宽度

1 个答案: