javascript字体大小调整

我有一个算法，可以在给定的文本框中减少字体大小，如果文本对于文本框来说太大（适合于文本框）

它工作得很好，但效率很低，因为它实际上只是将字体大小减小1，直到合适为止

有人能帮我提高效率吗，比如二进制切碎之类的

代码是：

function fitToBox(object, maxFontSize, minFontSize, maxHeight) {
    var box = document.getElementById(object);
    var currentHeight = box.offsetHeight;                       
    var currentFontSize = maxFontSize;                  
    do {
        box.style.fontSize = currentFontSize+"pt";
        currentFontSize = box.style.fontSize.replace("pt", "");
        currentHeight = box.offsetHeight;                                                       
        if(currentHeight >= maxHeight) {
            currentFontSize -= 1;
        }
    } while (currentHeight > maxHeight && currentFontSize > minFontSize);
    box.style.lineHeight = currentFontSize+"pt";
}

用HTML完成示例（只需在div中添加更多文本即可查看正在进行的装配）

函数fitToBox（对象、maxFontSize、minFontSize、maxHeight）{
var-box=document.getElementById（对象）；
var currentHeight=框。离光；
var currentFontSize=maxFontSize；
做{
box.style.fontSize=currentFontSize+“pt”；
currentFontSize=box.style.fontSize.replace（“pt”，”）；
currentHeight=box.offsetHeight；
如果（当前高度>=最大高度）{
currentFontSize-=1；
}
}而（currentHeight>maxHeight&¤tFontSize>minFontSize）；
box.style.lineHeight=currentFontSize+“pt”；
}
这是一些适合放入框中的文本这是一些适合放入框中的文本这是一些适合放入框中的文本
fitToBox（“fitme”，24、4、80）；

您可以这样做吗，在px中测量字体高度

 function fitToBox(object, maxFontSize, minFontSize, maxHeight) {
     var box = document.getElementById(object);                       
     var currentFontSize = box.offsetHeight - 6; //however much space you want to leave                  
     if(currentFontSize > maxFontSize){
          currentFontSize = maxFontSize;
     }else if(currentFontSize < minFontSize){
          currentFontSize = minFontSize;
     }
     box.style.lineHeight = currentFontSize+"px";
  }

函数fitToBox（对象、maxFontSize、minFontSize、maxHeight）{
var-box=document.getElementById（对象）；
var currentFontSize=box.offsetHeight-6；//要保留多少空间
如果（currentFontSize>maxFontSize）{
currentFontSize=maxFontSize；
}else if（currentFontSize

您可以这样做吗，在px中测量字体高度

 function fitToBox(object, maxFontSize, minFontSize, maxHeight) {
     var box = document.getElementById(object);                       
     var currentFontSize = box.offsetHeight - 6; //however much space you want to leave                  
     if(currentFontSize > maxFontSize){
          currentFontSize = maxFontSize;
     }else if(currentFontSize < minFontSize){
          currentFontSize = minFontSize;
     }
     box.style.lineHeight = currentFontSize+"px";
  }

函数fitToBox（对象、maxFontSize、minFontSize、maxHeight）{
var-box=document.getElementById（对象）；
var currentFontSize=box.offsetHeight-6；//要保留多少空间
如果（currentFontSize>maxFontSize）{
currentFontSize=maxFontSize；
}else if（currentFontSize

尝试根据盒子样式计算允许的最大尺寸

获取元素高度-顶部填充-底部填充，您将获得最大尺寸

var height = parseInt(box.clientHeight);
var pt = parseInt(box.style.paddingTop);
var pb = parseInt(box.style.paddingBottom);
var fontsize = (height - pt - pb) + "px";

至于下一部分。在检测溢出时想到的解决方案是执行以下操作

var boxClone = box.cloneNode(true)
boxClone.style.visibility = "hidden";
boxClone.id = "boxClone";
document.getElementsByTagName('body')[0].appendChild(boxClone);

box.onkeydown = function(e) { 

}

---

在keydown事件中，截取即将追加的字符并将其追加到boxclone中，然后测量其大小并将其与原始字符进行比较。知道数字后，您可以相应地调整文本。

尝试根据框样式计算允许的最大大小

获取元素高度-顶部填充-底部填充，您将获得最大尺寸

var height = parseInt(box.clientHeight);
var pt = parseInt(box.style.paddingTop);
var pb = parseInt(box.style.paddingBottom);
var fontsize = (height - pt - pb) + "px";

至于下一部分。在检测溢出时想到的解决方案是执行以下操作

var boxClone = box.cloneNode(true)
boxClone.style.visibility = "hidden";
boxClone.id = "boxClone";
document.getElementsByTagName('body')[0].appendChild(boxClone);

box.onkeydown = function(e) { 

}

---

在keydown事件中，截取即将追加的字符并将其追加到boxclone中，然后测量其大小并将其与原始字符进行比较。一旦知道了数字，您就可以相应地调整文本。

以下是一个将循环计数从示例中的9减少到4的版本：

function fitToBox(box, maxFontSize, minFontSize, maxHeight) {
    inc = (maxFontSize - minFontSize) / 2;
    currentFontSize = minFontSize + inc;
    box.style.fontSize = currentFontSize+"pt";
    while(inc >= 1) {
        if(box.offsetHeight > maxHeight) {
            dir = -1;
        } else {
            dir = 1;
        }
        inc = Math.floor(inc/2);
        currentFontSize += (dir * inc);
        box.style.fontSize = currentFontSize+"pt";
    }
}

它首先假设中间大小是一个好的开始，然后二进制将其切分到最大值以下的最佳匹配，并根据需要更改方向

---

我不明白您为什么要更改CSS行高度，所以我没有这样做。

以下是一个将循环计数从示例中的9减少到4的版本：

function fitToBox(box, maxFontSize, minFontSize, maxHeight) {
    inc = (maxFontSize - minFontSize) / 2;
    currentFontSize = minFontSize + inc;
    box.style.fontSize = currentFontSize+"pt";
    while(inc >= 1) {
        if(box.offsetHeight > maxHeight) {
            dir = -1;
        } else {
            dir = 1;
        }
        inc = Math.floor(inc/2);
        currentFontSize += (dir * inc);
        box.style.fontSize = currentFontSize+"pt";
    }
}

它首先假设中间大小是一个好的开始，然后二进制将其切分到最大值以下的最佳匹配，并根据需要更改方向

---

我不明白你为什么要更改CSS行高，所以我没有这样做。

好吧，你基本上是说只需在px中设置字体大小，而不是点，然后使用框高来完成这项操作？我不明白的是，这将如何使字体尽可能大，然后随着输入的文本的增加而减少？对不起，一开始我误解了您的需要。希望编辑会对你有所帮助，我仍然认为这与我的问题无关。我不是说你在盒子里打字。文本是预先创建的，并放入页面上的固定宽度/高度div中。我希望div的字体大小是动态的，所以如果没有太多的文本，那么字体大小是大的，这意味着文本在框中占据尽可能多的空间。但若有很多文本，那个么字体大小必须减小，以确保它适合于文本框。我的函数运行得很好，只是每次将字体大小减小1的愚蠢循环，这就是问题所在，因为它效率很低。我想要一个更好的算法，比如二进制切分之类的。好吧，你基本上是说，只需设置字体大小，而不是点，然后使用方框高度就可以了？我不明白的是，这将如何使字体尽可能大，然后随着输入的文本的增加而减少？对不起，一开始我误解了您的需要。希望编辑会对你有所帮助，我仍然认为这与我的问题无关。我不是说你在盒子里打字。文本是预先创建的，并放入页面上的固定宽度/高度div中。我希望div的字体大小是动态的，所以如果没有太多的文本，那么字体大小是大的，这意味着文本在框中占据尽可能多的空间。但若有很多文本，那个么字体大小必须减小，以确保它适合于文本框。我的函数工作得很好，这只是一个愚蠢的循环，每次将字体大小减小1，这就是问题所在