Question

function cropText(crop) {
    var str = $('div').text();

    var val=str.substring(0,crop)+'...';
    $('div').html(val);
}



$(window).ready(function(){

    var w = $(window).width();

    if ( w > 500 ) {
        cropText(50);
    } else {
        cropText(20);
    }    
})

$(window).resize(function(){

    var w = $(window).width();

    if ( w > 500 ) {
        cropText(50);
    } else {
        cropText(20);
    }    
})

Jsfiddle

问题在于，当窗口宽度小于500px时，文本裁剪为20个符号，但是当我调整此窗口的大小（宽度将超过500px）时，cropText（）函数将剪切裁剪文本。但我需要cropText（）函数始终裁剪原始文本。

提前致谢。

Answer 1

这种情况正在发生，因为当您调用resize（）时，您正在裁剪已经裁剪的文本。

您需要将初始文本存储在某个变量中并在其上裁剪，而不是在已经裁剪的版本上。

Answer 2

调用cropText（）时，您将丢弃原始文本。原件没有存放在任何地方。

您可以创建一个隐藏的div，其中包含要裁剪的原始文本，并将原始文本复制到该div中。

function cropText(crop) {
    var str = $('#hidden-div').text();

    var val=str.substring(0,crop)+'...';
    $('div').html(val);
}

Answer 3

这是你工作的例子。 http://jsfiddle.net/q8Cfq/

您应该在函数外部使用变量，以便每次调用它时都可以访问它。

var str;
$(window).ready(function(){
        str = $('div').text();
        var w = $(window).width();

        if ( w > 500 ) {
            cropText(50);
        } else {
            cropText(20);
        }    
    })

然后你会做那样的事情。因为它正在访问在开头设置的全局变量。该功能不会改变其内容。

function cropText(crop) {
    var val=str.substring(0,crop)+'...';
    $('div').html(val);
}

调整窗口大小时裁剪文本

3 个答案: