Question

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

我有一个初步的脚本，但它并没有真正做到这一点。对于每个浏览器调整大小，它只会将像素调整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
}

？ - 当然相应地改变价值

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}); 
        }
    });
}

});

但是，正如你所看到的，它可能会变得有点疯狂。一般而言，换行符会更加用户友好。你可能可以在那里放一些逻辑来确定太小的太小而且它应该只是换行。但是，解决响应问题的行业标准始终是媒体查询。除非你有理由不这样做，否则我会调查这方面的解决方案。

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

2 个答案: