使用javascript動態縮短帶有「閱讀更多」鏈接的文本

Question

我有一段文字，我想用「閱讀更多」鏈接使用JavaScript動態縮短文本。我用下面的JavaScript代碼：

var limitDesc = -1; 
function ResponsiveDesc() { 
//var limitDesc = 100; 
//var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i); 
var chars = $("#ResponsiveDescription").html(); 
if (chars.length > limitDesc) { 
    var visiblePart = $("<span> " + chars.substr(0, limitDesc - 1) + " </span>"); 
    var dots = $("<span class='dots'>... </span>"); 
    var hiddenPart = $("<span class='more'>" + chars.substr(limitDesc - 1) + "</span>"); 
    var readMore = $("<span class='read-more'>More</span>"); 

    readMore.click(function() { 
     $(this).prev().remove(); // remove dots 
     $(this).next().show(); //show hiddenPart 
     $(this).remove(); // remove readMore 
    }); 

    $("#ResponsiveDescription").empty() 
     .append(visiblePart) 
     .append(dots) 
     .append(readMore) 
     .append(hiddenPart); 
} 
} 
$(document).ready(function() { 
if (limitDesc > 0 && $(window).width() < 500) { 
    ResponsiveDesc(); 
} 
}); 

的主要問題是，我不知道這是什麼代碼，把我的文字在文字或鏈接的中間。解決這個問題的最好方法是什麼？ 我可以手動更改每個頁面上的「limitDesc」變量，但是當頁面的內容是動態的時候，這是不可能的。 非常感謝您。

Answer 1

您可以在長度限制之前將最後一個空格處的字符串拆分。 可以使用lastIndexOf()確定它：

limitDesc = chars.lastIndexOf(" ", limitDesc); 

http://www.w3schools.com/jsref/jsref_lastindexof.asp