Question

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

并且它工作正常，但它的效率非常低，因为它实际上只是将字体大小减小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中添加更多文本以查看正在进行的拟合）

<html>
<head>
<script type="text/javascript">
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";
}
</script>
</head>
<body>

<div id="fitme" style="background-color: yellow; font-size: 24pt; width: 400px;">
    This is some text that is fit into the box This is some text that is fit into the box This is some text that is fit into the box
</div>

<script type="text/javascript">
    fitToBox("fitme", 24, 4, 80);
</script>

</body>
</html>

Answer 1

这是一个版本，可以将循环次数从示例中的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行高，所以我还没有这样做。

Answer 2

你可以在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";
  }

Answer 3

尝试根据方框样式计算最大允许尺寸。

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

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事件中，拦截即将附加的char并将其附加到boxclone中 - 然后测量其大小并将其与原始值进行比较。一旦知道了数字，就可以相应地调整文本。

javascript字体调整大小

3 个答案: