div 内可能的最大文本大小

Question

我正在寻找一种方法来将 div 内的文本自动调整为最大尺寸。最大尺寸是在仍然适合 div 的情况下可能的最大尺寸。

我知道在 CSS 中不可能做到这一点。使用javascript可以吗？

Answer 1

你可以在纯 JavaScript 中使用这样的技巧来“自动调整”字体大小：

window.onload = function() {
    var oDiv = document.getElementById("Div1");
    oDiv.style.overflow = "auto"; //for Firefox, but won't ruin for other browsers
    var fontSize = 14;
    var changes = 0;
    var blnSuccess = true;
    while (oDiv.scrollWidth <= oDiv.clientWidth) {
        oDiv.style.fontSize = fontSize + "px";
        fontSize++;
        changes++;
        if (changes > 500) {
            //failsafe..
            blnSuccess = false;
            break;
        }
    }
    if (changes > 0) {
        //upon failure, revert to original font size:
        if (blnSuccess)
            fontSize -= 2;
        else
            fontSize -= changes;
        oDiv.style.fontSize = fontSize + "px";
    }
};

现场测试用例。

如果您知道的话，请从实际字体大小开始<div>，否则最好使用较小的数字作为第一个数字。

上面代码的工作原理是，当文本大于其容器的设置宽度时，scrollWidth“实际”宽度属性将大于设置宽度。

编辑：scrollWidth如果CSS 属性设置为其默认的“可见”值， Firefox 将不会更新该overflow属性，因此您必须将其设置为“自动” - 代码会为您执行此操作，但也可以通过 CSS 设置它，如果您更喜欢。