javascript - 使文本响应其是否溢出其父 div

Question

如何确保文本调整其字体大小以防止其溢出静态 50 像素导航栏？

我有一个初步的脚本，但它并没有真正起作用。每次浏览器调整大小时，它只会将像素调整 1 像素，甚至没有考虑是否有人直接使用移动​​设备:

          window.onresize = function(){    
            var title = document.getElementById('testing');             
            var style = window.getComputedStyle(title, null).getPropertyValue('font-size');
            var fontSize = parseFloat(style);  
            if(title.scrollHeight > 51){
              title.style.fontSize = (fontSize - 0.5) + 'px';
              $(title).height(50);
            } else if (title.scrollHeight < 51) {
              title.style.fontSize = (fontSize + 0.5) + 'px';
              $(title).height(50);
            }
          };

Answer 1

只需使用 CSS...

#testing{
    font-size:1.5vw
}

？ - 当然相应地改变值