在我們日常的網頁開發中，列表是不可避免的元素之一。而有時候，我們需要讓列表中的元素自動換行，以避免內容過長溢出造成視覺不美觀的問題。

在這種情況下，我們可以使用 jQuery 來實現 li 元素自動換行的效果。

// 獲取所有 li 元素
var liElements = $("li");
// 設置每個 li 元素的寬度
var liWidth = 200;
// 遍歷所有 li 元素
liElements.each(function(index, element){
// 如果當前 li 元素的寬度超過了指定的寬度就進行換行操作
if($(this).width() >liWidth){
// 獲取當前 li 元素中的文本內容
var text = $(this).text();
// 將文本內容按照指定的寬度進行分段
var chunks = chunkString(text, liWidth);
// 隱藏當前 li 元素
$(this).hide();
// 在當前 li 元素的后面插入分段后的 li 元素
chunks.forEach(function(chunk){
$("
").text(chunk).insertAfter($(element));
});
}
});
/**
* 將字符串按照指定的長度進行分割
*
* @param {String} str 待分割的字符串
* @param {Number} size 分割的長度
* @return {Array} 分割后的數組
*/
function chunkString(str, size){
var chunks = [];
while(str){
if(str.length<= size){
chunks.push(str);
break;
} else {
chunks.push(str.substr(0, size));
str = str.substr(size);
}
}
return chunks;
}

上述代碼中，首先我們使用 jQuery 獲取到所有 li 元素，并設置每個 li 元素的寬度。然后對于每個 li 元素，判斷其寬度是否超出指定寬度，如果是，則將其文本按照指定的寬度進行分段，并插入到當前 li 元素的后面。

最后，對于分割字符串的函數 chunkString，我們使用了 while 循環來實現。同時，在每次循環時判斷當前字符串是否小于等于指定長度，如果是，則將其全部插入到分割后的數組中，并跳出循環；否則，將其按照指定長度分割，并繼續循環處理剩余的字符串。

通過以上代碼，我們就可以輕松地實現 li 元素的自動換行效果，提高網頁的可讀性和可視化效果。