设置接受变量文本的固定宽度文本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>