最大文本大小可能里面的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"; 
    } 
}; 

Live test case。

开始与<div>的实际字体大小，如果你知道它，否则最好使用数量较少的第一个号码。

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

编辑：如果overflow CSS属性被设置为默认“看得见”的价值 Firefox将不会更新scrollWidth属性，因此必须将其设置为“自动” - 这个代码是干什么的你，但如果您愿意，也可以通过CSS设置它。