裁剪文本，當被調整大小的窗口

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

的問題是，當窗口寬度小於500像素，文本被裁剪到20個符號，但是，當我調整該窗口（寬度將超過500px），cropText（）函數將剪切裁剪的文本。但我需要那個cropText（）函數總是裁剪原始文本。

在此先感謝。

Answer 1

這是您的示例工作。 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); 
} 

Answer 2

發生這種情況是因爲當您調用resize（）時，您正在裁剪已裁剪文本。

您需要將初始文本存儲在某個變量中，然後對其進行裁剪，而不是對其已裁剪的版本進行裁剪。

Answer 3

當您調用cropText（）時，您將丟棄原始文本。原件沒有存儲在任何地方。

您可以創建一個隱藏的div，其中包含要裁剪的原始文本，並將原始文本複製到該div中。

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

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