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

Question

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

我有一个初步的脚本，但它并不能真正起到作用。每次浏览器调整大小时，它只会将像素调整 1px，甚至没有考虑到有人直接进入移动设备：

          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
}

？ - 当然相应地改变价值

Answer 2

我整理了一个 jQuery 解决方案： http://jsfiddle.net/dsunr5px/1/

它将逐渐减小文本的大小，直到它适合其父级：

jQuery(document).ready(function() {

adjustWidth();

jQuery(window).onresize(adjustWidth());

function adjustWidth() {

    jQuery(".text").each(function() {
        var width = jQuery(this).width();

        while(width <= jQuery(this).children().width() )
        {
            var fontsize = parseInt(jQuery(this).children().css('font-size'));
            var newfs = fontsize - 1 + 'px';
            jQuery(this).children().css({'font-size': newfs}); 
        }
    });
}

});

但是，正如您所看到的，它可能会变得有点疯狂。一般来说，换行符会更加用户友好。您可能可以在其中放置更多逻辑来确定在什么时候太小太小，它应该只是换行。然而，解决响应式问题的行业标准始终是媒体查询。除非您有理由不这样做，否则我会朝这个方向研究解决方案。