爲接受可變文本的固定寬度文本div設置最小和最大字體大小

Question

我想知道如何才能爲接受可變文本的固定寬度div設置最小和最大字體大小。我看了一個類似的question，但它沒有提供一個簡單的Javascript方法。

如果文字很短，字體大小將是12px，如果是多行，則可以降低到最小8px。我將如何能夠在普通的JavaScript中完成此操作？

謝謝！

Answer 1

添加一個事件監聽器到一些改變的屬性，然後相應地改變字體大小。

document.getElementById("testInput").addEventListener("keyup", function(){ 
 
var inputText = document.getElementById("testInput").value; document.getElementById("test").innerHTML = inputText; 
 
if(inputText.length > 10){ 
 
    document.getElementById("test").style.fontSize = "8px"; 
 
}else if(inputText.length > 5){ 
 
    document.getElementById("test").style.fontSize = "10px"; 
 
}else{ 
 
    document.getElementById("test").style.fontSize = "12px"; 
 
} 
 
});

<input id="testInput"> 
 
<div id="test"></div>