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

如何确保文本调整其字体大小以防止溢出静态50px导航栏？使文本响应是否溢出它的父div

我有一个初步脚本，但它并没有真正做到这一点。只调整由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); 
      } 
      };

来源

2015-10-20 Peter Ward

更实用的方法是使用CSS mediaqueries并为您的导航栏设置移动安全布局。 – hampusohlsson

我不完全明白你要做什么，你的导航大小是根据屏幕尺寸改变还是总是50 x 50？那么你基本上希望你的文字能够“填满”整个Nav基地的大小？ –

@NaturalLam，导航大小保持在50px，但内部div的文本基于数据库内容而改变。因此，如果内容太长，内容将溢出并导致div的高度超过50px。 Nav的溢出是隐藏的，所以这个内容只是部分可见的。由于这些原因，我认为CSS不会起作用，因为文本的初始大小也应该响应此内部div中文本的长度。 –

只需使用CSS ...

#testing{ 
    font-size:1.5vw 
}

？ - 变化值相应当然

来源

2015-10-20 22:31:30 AdamJeffers

当您将平板电脑或全屏窗口旋转到不同的长宽比时，问题就变得很清楚。也就是说：缩小的窗口会产生很小的文本，因为它缩小了...... – dandavis

是的，但那是当你使用@media orientation queries将值更改为ems的时候？只是一个想法 – AdamJeffers

是的，它只是因为我们的导航栏被硬编码保持在'50px.'可变的屏幕比率成为问题。也许答案是写一个算法，帐户导航栏本身的高宽比，而不是屏幕。 –

我把一个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}); 
     } 
    }); 
} 

});

但是，正如你可以看到，它可以变得有点疯狂。一般而言，换行会更方便用户使用。你也许可以在那里增加更多的逻辑来确定在哪个点上太小，它应该只是做一个换行符。尽管解决响应式问题的行业标准始终是媒体查询。除非你有驾驶理由，否则我会调查这个方向的解决方案。

来源

2015-10-20 22:42:18 Practically

明天我会拍这张照片。我不使用媒体查询的原因可能并不明确，因为这个标题部分的用户独特内容会导致断点的不同。（我会注意到我们正在使用基金会，而这部分是作为一个列包装的。） –

是否可以接受换行符？正如在文本越过列的宽度时，文本会在下一行打断。如果是这样，只要确保文本具有CSS属性显示：内联和其父母具有属性显示：块。 – Practically

噢 - 我明白了。我没那么清楚。我的div垂直溢出它的父导航栏，而不是水平。文本不溢出。 div的高度增加，并且文本保持在里面，但是我需要高度保持在50px，并且在溢出50px div之前调整文本的字体大小......如果这样不够混乱！ –

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

回答

相关问题