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

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

我有一个初步的剧本，但它并不真正起作用。每次调整浏览器大小时，它只会将像素调整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);
            }
          };

window.onresize=function（）{
var title=document.getElementById（“测试”）；
var style=window.getComputedStyle（title，null）.getPropertyValue（'font-size'）；
var fontSize=parseFloat（样式）；
如果（title.scrollHeight>51）{
title.style.fontSize=（fontSize-0.5）+“px”；
$（标题）。身高（50）；
}否则如果（title.scrollHeight<51）{
title.style.fontSize=（fontSize+0.5）+“px”；
$（标题）。身高（50）；
}
};

只需使用CSS

#testing{
    font-size:1.5vw
}

？-当然要相应地更改值

只需使用CSS

#testing{
    font-size:1.5vw
}

---

？-当然，相应地更改值

我提出了一个jQuery解决方案：

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

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

});

jQuery（文档）.ready（函数（）{
调整宽度（）；
jQuery（窗口）.onresize（adjustWidth（））；
函数adjustWidth（）{
jQuery（“.text”）.each（函数（）{
var width=jQuery（this）.width（）；
而（width我提出了一个jQuery解决方案：

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

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

});

jQuery（文档）.ready（函数（）{
调整宽度（）；
jQuery（窗口）.onresize（adjustWidth（））；
函数adjustWidth（）{
jQuery（“.text”）.each（函数（）{
var width=jQuery（this）.width（）；
虽然（宽度）更可靠的方法是使用CSS mediaqueries并为导航栏设置移动安全布局。我不太明白你想做什么，那么你的导航大小是根据屏幕大小而改变还是总是50 x 50？那么你基本上希望你的文本根据它的大小“填充”整个导航栏吗？@NaturalLam，导航大小保持不变在50px，但内部div的文本会根据数据库内容发生变化。因此，如果内容太长，则内容会溢出，并导致该div的高度超过50px。Nav的溢出是隐藏的，因此该内容仅部分可见。出于这些原因，我不认为仅CSS会起作用，因为文本的初始大小应该是最小的o对内部分区中文本的长度做出响应。更可靠的方法是使用CSS mediaqueries，并为导航栏设置移动安全布局。我不太明白你想做什么，那么你的导航大小是根据屏幕大小改变还是始终为50 x 50？那么你基本上希望你的文本“填充”整个导航栏吗v基于大小？@NaturalLam，Nav大小保持在50px，但内部div的文本会根据数据库内容发生变化。因此，如果内容太长，则内容将溢出，并导致该div的高度超过50px。Nav的溢出是隐藏的，因此该内容仅部分可见。出于这些原因，我认为仅CSS不会这样做是因为文本的初始大小也应该与此内部分区中文本的长度相适应。当您将平板电脑或全屏窗口旋转到不同的纵横比时，问题就变得很明显了。也就是说，缩小窗口会在“缩小”时过快地产生微小文本…是的，但那时你可能会使用@media orientation querys将值更改为ems？只是想一想，改变屏幕比例会有问题，因为我们的导航栏是硬编码的，保持在
50px。
也许答案是编写一个算法来解释导航栏本身的高宽比，而不是换言之，单词与div维度的比例可以也应该改变以保持可读性。当你将平板电脑或全屏窗口旋转到不同的纵横比时，问题就变得很明显了。也就是说，缩小窗口会在“缩小”时过快地产生微小文本…是的，但那时你可能会使用@media orientation querys将值更改为ems？只是想一想，改变屏幕比例会有问题，因为我们的导航栏是硬编码的，保持在
50px。
也许答案是编写一个算法来解释导航栏本身的高宽比，而不是而不是屏幕。换句话说，单词与div维度的比率可以也应该改变以保持可读性。我明天将对此进行一次尝试。我不使用媒体查询的原因（这可能是不知情的）是，断点将根据用户在此标题部分的唯一内容而有所不同。（我注意到我们使用的是基础，这个部分被包装成一个列。）换行是否可以接受？如中所示，如果文本超过列的宽度，它将在下一行的某个单词处换行。如果是这样，只需确保文本具有css属性display:inline，并且其父级具有属性display:block.Oh-我明白了。我没有那么清楚。我的div在垂直方向上溢出了它的父级导航栏，而不是水平方向。text没有溢出。div的高度增加，文本留在里面，但我需要高度保持在50px，并在溢出50px div之前让文本调整字体大小…如果这还不够混乱的话！我在这个答案中给出的解决方案是针对宽度的，但是小提琴示例显示了如果太宽，它会变得太小很多文本放在太小的地方。它可能满足您的要求，但我在这里的经验总是让我强制设计接受可变高度，以便动态文本始终可读。用户体验第一，设计第二。我明天将对此进行一次尝试。我不使用媒体查询的原因可能是不知情的，即断点将根据