Javascript Jquery窗口大小。更改具有文本字符限制的css类

我有三种不同的回答： 大显示器最小宽度：1200px 小型显示器（最小宽度：992px）和（最大宽度：1199px） 平板电脑（最小宽度：768px）和（最大宽度：991px）

我正在尝试使用下面的代码更改上述三种屏幕大小的字符限制。有人能告诉我我做错了什么吗。

函数checkWidth（）{
如果（$（窗口）.width（）<1280）{
$（“#限制字符”）。每个（函数（i）{
len=$（this）.text（）.length；
如果（长度>30）
{
$（this.text（$（this.text（）.substr（0,30）+'…'）；
}
})
} 
}
$（窗口）。调整大小（选中宽度）；

我在这里为您创建了一个示例

函数checkWidth（）{
如果（$（窗口）.width（）<700）{
$（'#menu2'）.addClass（'f-nav'）；
$（“#menu2”）。每个（函数（i）{
len=$（this）.text（）.length；
如果（长度>30）
{
$（this.text（$（this.text（）.substr（0,30）+'…'）；
}
})
}否则{
$（'#menu2'）.removeClass（'f-nav'）；
$（“#menu2”）。每个（函数（i）{
$（this.text（$（this.data（'originalTxt'））；
});
}
}
$（“#menu2”）。每个（函数（）{
$（this）.data（{originalTxt:$（this.text（）}）；
});
$（窗口）。调整大小（选中宽度）；

宽度设置为700以进行测试。您可以为自己的实现更改它

---

谢谢

如果

var defaultString=$("#menu2").text();
function checkWidth() {

    if($(window).width()>1200){
        $('#menu2').removeClass('f-nav').removeClass("f-nav-small");
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>30)
            {
              $(this).text(defaultString);
            }
        });
        return false;
    }
    if ($(window).width() > 991 && $(window).width()<1200 ) {
        $('#menu2').addClass('f-nav');
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>30)
            {
              $(this).text($(this).text().substr(0,30)+'...');
            }
        });
        return false;
    }
    if($(window).width()<992){
        $('#menu2').removeClass("f-nav").addClass('f-nav-small');
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>10)
            {
              $(this).text($(this).text().substr(0,10)+'...');
            }
        });
        return false;
    }

}
checkWidth();
$(window).resize(checkWidth);

var defaultString=$（“#menu2”）.text（）；
函数checkWidth（）{
如果（$（窗口）.width（）>1200）{
$（'#menu2'）.removeClass（'f-nav'）.removeClass（'f-nav-small'）；
$（“#menu2”）。每个（函数（i）{
len=$（this）.text（）.length；
如果（长度>30）
{
$（this）.text（默认字符串）；
}
});
返回false；
}
如果（$（window.width（）>991&&$（window.width（）30）
{
$（this.text（$（this.text（）.substr（0,30）+'…'）；
}
});
返回false；
}
如果（$（窗口）.width（）10）
{
$（this）.text（$（this.text（）.substr（0,10）+'…'）；
}
});
返回false；
}
}
检查宽度（）；
$（窗口）。调整大小（选中宽度）；

你的小提琴很管用。它更改背景颜色并限制字符数。什么类型的元素是

#limit char

？它是一个

输入

？如果是这样的话，也许你可以使用

[maxlength]

属性Hi Shahzad先生，这个脚本可以按照我的要求在浏览器上运行，但是当我使用ipad查看页面时，它并没有限制字符，即使是在web浏览器上较小尺寸的字符也可以正常工作。它不工作的原因可能是什么？检查$（window）.width（）是否返回预期值？在脚本上，我设置了“<1270”，当我在桌面计算机上调整浏览器大小时，它似乎工作了。但当我在iPad上打开它时，它并没有限制字符。iPad上启用了Javascript，因此它应该可以工作。但不，我还不知道这里发生了什么。

function checkWidth() {
    if ($(window).width() < 700) {
        $('#menu2').addClass('f-nav');
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>30)
            {
              $(this).text($(this).text().substr(0,30)+'...');
            }
        })
    } else{
        $('#menu2').removeClass('f-nav');
        $("#menu2").each(function(i){
        $(this).text($(this).data('originalTxt'));
        });
    }
}
$("#menu2").each(function(){
        $(this).data({originalTxt: $(this).text()});
});
$(window).resize(checkWidth);

var defaultString=$("#menu2").text();
function checkWidth() {

    if($(window).width()>1200){
        $('#menu2').removeClass('f-nav').removeClass("f-nav-small");
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>30)
            {
              $(this).text(defaultString);
            }
        });
        return false;
    }
    if ($(window).width() > 991 && $(window).width()<1200 ) {
        $('#menu2').addClass('f-nav');
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>30)
            {
              $(this).text($(this).text().substr(0,30)+'...');
            }
        });
        return false;
    }
    if($(window).width()<992){
        $('#menu2').removeClass("f-nav").addClass('f-nav-small');
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>10)
            {
              $(this).text($(this).text().substr(0,10)+'...');
            }
        });
        return false;
    }

}
checkWidth();
$(window).resize(checkWidth);