我正在寻找一种将 div 中的文本自动调整为最大尺寸的方法。最大尺寸是在仍适合 div 的情况下可能的最大尺寸。
我知道在 CSS 中不可能做到这一点。是否可以使用 javascript?
最佳答案
您可以在纯 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
“实际”宽度的属性将大于设置的宽度。
编辑: Firefox 不会更新 scrollWidth
属性如果 overflow
CSS 属性设置为其默认的“可见”值,因此您必须将其设置为“自动”- 代码会为您执行此操作,但如果您愿意,也可以通过 CSS 进行设置。
关于javascript - div 内可能的最大文本大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7872563/