将 Window 调整大小与文本长度相结合

Question

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

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

window调整大小的函数（基本上是上下结合）：

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

我想知道 if/how 数学函数可以将视口宽度计算为一个范围并将截断更改为最大断点吗？

更新...

我从这个帖子中找到了一个效果更好的解决方案：

Answer 1

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

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

/**
 * 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' 和 window 'resize'（也可以是 'width' 或 'height'），具体取决于您要实现的目标。必须在执行功能事件之前完成绑定。

将 Window 调整大小与文本长度相结合

Combine Window Resize with Text Length

javascript

jquery

substring

truncate

window-resize

更新...