调整文本大小的纯Javascript算法

我有一个固定大小的html div和一个用于输入文本的额外html输入框。该文本随后显示在div中

我希望文本始终居中，并且始终是字符串中字符数的最大可能大小

我已经提出了一个工作原型，但它不太好用。文本的大小并不总是正确的

function bindText(readElement, writeElement, extra){   
    //the text from the input form triggered by onkeyup event
    var textStr = document.getElementById(readElement).value;

    //the div to write the text to 
    var element = document.getElementById(writeElement);

    //the major part of the function that I have just brute forced to try and work out
    if(textStr.length > 0){                        

        //check the length of the string
        if(textStr.length > 8 && textStr.length < 12){
             //set a the font size accordingly
             element.style.fontSize = 150;
        }

        //same again    
        if(textStr.length >= 12 && textStr.length < 16){
            element.style.fontSize = 120;
        }

        if(textStr.length >= 16 && textStr.length < 20){
            element.style.fontSize = 100;
        }

        if(textStr.length >= 20 && textStr.length < 25){
            element.style.fontSize = 80;
        }

        if(textStr.length >= 25 && textStr.length < 32){
            element.style.fontSize = 55;
        }

        if(textStr.length >= 32 && textStr.length < 40){
            element.style.fontSize = 50;
        }

        if(textStr.length >= 40 && textStr.length < 50){
            element.style.fontSize = 45;
        }

        if(textStr.length >= 76){
            element = textStr.splice(0, 75);
        }
       }
   }

函数bindText（readElement、writeElement、extra）{
//onkeyup事件触发的输入表单中的文本
var textStr=document.getElementById（readElement）.value；
//要写入文本的div
var元素=document.getElementById（writeElement）；
//这个函数的主要部分，我刚刚用蛮力强迫它去尝试和解决
如果（textStr.length>0）{
//检查字符串的长度
如果（textStr.length>8&&textStr.length<12）{
//设置相应的字体大小
element.style.fontSize=150；
}
//同样的
如果（textStr.length>=12&&textStr.length<16）{
element.style.fontSize=120；
}
如果（textStr.length>=16&&textStr.length<20）{
element.style.fontSize=100；
}
如果（textStr.length>=20&&textStr.length<25）{
element.style.fontSize=80；
}
如果（textStr.length>=25&&textStr.length<32）{
element.style.fontSize=55；
}
如果（textStr.length>=32&&textStr.length<40）{
element.style.fontSize=50；
}
如果（textStr.length>=40&&textStr.length<50）{
element.style.fontSize=45；
}
如果（textStr.length>=76）{
元素=textStr.拼接（0,75）；
}
}
}

是否有更优雅的解决方案来获得更一致的结果

---

提前感谢

您实际上可以构建一个试错算法，修改文本的

字体大小

，直到它达到正确的大小。
我现在没有时间写它，所以我想到了一个类似伪代码的东西：

test_element = clone(element);
test_element.innerText = text;
test_element.style.left = '-9999px'; // so that it would be hidden from the user
for(var i = maxFontSize; i > minFontSize; i--)
    {
        test_element.style.fontSize = i + 'px';
        if(test_element.width <= element.width && test_element.height <= element.height)
            break;
    }
 // and the fontSize is stored in the `i` var

test\u元素=克隆（元素）；
test_element.innerText=文本；
test_element.style.left='-9999px'；//这样就可以对用户隐藏它
对于（变量i=maxFontSize；i>minFontSize；i--）
{
test_element.style.fontSize=i+'px'；
如果（test_element.width，正如我在字体大小和文本长度之间依赖关系的近似值中所看到的：

我在表格中对此进行了插值：

您可以通过以下参数查看结果：



现在，您可以将所有的
if
和
else if
替换为一个用于字体大小
h
计算的公式，并将
min（h，max\u font\u size）
和
max（min\u font\u size，h）
用于设置字体最小和最大大小

function bindText(readElement, writeElement, extra){   
    var textStr = document.getElementById(readElement).value;
    var element = document.getElementById(writeElement);
    var x, h;

    x = textStr.length;
    h = Math.exp(-0.1 * x + 6) + 38;
    h = Math.min(h, 120);
    h = Math.max(h, 45);

    element = textStr.splice(0, 75);// as you wish and it is not my business why %)
    element.style.fontSize = h;

    return (0);
}

难道你不能在CSS中使用
text align=center
来完成这项任务吗？首先，你可以将
textStr.length
存储在一个变量中，并用它替换它们，这样你就不会每次都检查长度了（也不会“干”）。并使用
else if
或
切换案例
，这样即使已计算为true，也不会继续执行ifs。
function bindText(readElement, writeElement, extra){   
    var textStr = document.getElementById(readElement).value;
    var element = document.getElementById(writeElement);
    var x, h;

    x = textStr.length;
    h = Math.exp(-0.1 * x + 6) + 38;
    h = Math.min(h, 120);
    h = Math.max(h, 45);

    element = textStr.splice(0, 75);// as you wish and it is not my business why %)
    element.style.fontSize = h;

    return (0);
}