将窗口调整大小与文本长度相结合答案

【问题标题】：Combine Window Resize with Text Length将窗口调整大小与文本长度相结合
【发布时间】：2022-06-17 23:25:17
【问题描述】：

我需要一些帮助来编写一个包含多个 if 语句的函数（除非有更好的方法）。我基本上想根据窗口大小截断文本长度。所以如果视口小于400px，文字长度大于35，那么就用下面这个方法截断吧……

$('option').each(function () {
  var text = $(this).text();
  if (text.length > 35) {
    text = text.substring(0, 35) + '...';
    $(this).text(text);
  }
});

调整窗口大小的功能（基本上是上下结合）：

$(document).ready(function(){
   if($( window ).width() < 400){
       //do something;
   }else{
       //do something else;
   }
});
$( window ).resize(function() {
    if($( window ).width() < 400){
       //do something;
   }else{
       //do something else;
   }
});

进行了更多研究并使用此代码：

$(document).ready(myfunction);
$(window).on('resize',myfunction);
$('option').each(myfunction);

function myfunction() {
  var text = $(this).text();
  if (text.length > 35 == ($(window)).width() < 400) {
    text = text.substring(0, 35) + '...';
    $(this).text(text);
  }
}

我想知道数学函数是否/如何将视口宽度计算为一个范围并将截断更改为最大断点？

【问题讨论】：

有什么特别的理由不使用css吗？
这专门用于选择框中的选项。选项标签忽略样式。问题是一些选项的值非常长，而另一些则没有。我测试了默认行为，选项框扩展到内容。在桌面上不是一个大问题（不是很好看），但在移动设备上这是一个问题。我试图避免为此使用另一个 js 库。

标签： javascript jquery substring truncate window-resize

【解决方案1】：

我最终回答了我自己的问题。因此，我将其发布在这里，以防其他人有类似的需求或可以改进我所做的...

基本上，我通过应用字符长度和窗口宽度来截断选择选项框。这可以防止非常冗长的选项文本流过其容器并超出屏幕。我确信有一种更有效的编码方式，但我的测试似乎是成功的，目前有效。

/**
 * Truncate lengthy option text in select boxes
 */
var defaultString=$('option').text();
function checkWidth() {

    if($(window).width() > 600){
        $('option').each(function(i){
        len=$(this).text().length;
           if(len>65)
            {
              $(this).text($(this).text().substr(0,65)+'...');
            }
        });
        return false;
    }
    if ($(window).width() > 451 && $(window).width() < 599 ) {
        $('option').each(function(i){
        len=$(this).text().length;
           if(len>50)
            {
              $(this).text($(this).text().substr(0,50)+'...');
            }
        });
        return false;
    }
    if($(window).width() < 450){
        $('option').each(function(i){
        len=$(this).text().length;
           if(len>35)
            {
              $(this).text($(this).text().substr(0,35)+'...');
            }
        });
        return false;
    }
}
checkWidth();
$(window).resize(checkWidth);
$(document).ready(checkWidth);

最后三行绑定“checkWidth”和窗口“resize”（也可以是“width”或“height”），具体取决于您要实现的目标。必须先绑定，然后才能执行函数事件。

【讨论】：