我正在寻找一种方法来将div中的文本自动调整为其最大大小。最大尺寸是最大尺寸,同时仍适合div。
我知道在CSS中不可能这样做。是否可以使用javascript?
答案 0 :(得分:4)
您可以在纯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设置它。