为接受可变文本的固定宽度文本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>