「閱讀更多」切換不與字符數量，但句子長度

Question

我創建「閱讀更多」和「閱讀更少」按鈕。但是，現在它只顯示100個字符，因爲我已將它設置爲這樣的var showChar = 100;。我不想根據字符長度和句子長度來決定。我將添加幾篇文章，並希望每篇文章在開頭都有不同的長度。有沒有辦法做到這一點？一直在試圖弄清楚，我是這個初學者。

這裏是一個例子，如何擁有它。

這裏是我的文章：

在反應俄總理梅德韋傑夫對擇捉島的訪問上週六，政府將停止生產安排外長岸田文雄訪問俄羅斯暫時，政府消息來源說...更多

我希望它在它說「更多」的地方突破。

此舉是在政府對俄羅斯總理訪問北海道北部四個領土之一的Etorofu之後表示強烈不滿。

$(document).ready(function() { 
 
    var showChar = 100; 
 
    var ellipsestext = "..."; 
 
    var moretext = "more"; 
 
    var lesstext = "less"; 
 
    $('.more').each(function() { 
 
     var content = $(this).html(); 
 
    
 
     if(content.length > showChar) { 
 
    
 
      var c = content.substr(0, showChar); 
 
      var h = content.substr(showChar, content.length - showChar); 
 
    
 
      var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; 
 
    
 
      $(this).html(html); 
 
     } 
 
    
 
    }); 
 
    
 
    $(".morelink").click(function(){ 
 
     if($(this).hasClass("less")) { 
 
      $(this).removeClass("less"); 
 
      $(this).html(moretext); 
 
     } else { 
 
      $(this).addClass("less"); 
 
      $(this).html(lesstext); 
 
     } 
 
     $(this).parent().prev().toggle(); 
 
     $(this).prev().toggle(); 
 
     return false; 
 
    }); 
 
});

a { 
 
    color: #4088ff; 
 
} 
 
a:visited { 
 
    color: #4088ff; 
 
} 
 
a.morelink { 
 
    text-decoration:none; 
 
    outline: none; 
 
} 
 
.morecontent span { 
 
    display: none; 
 
} 
 
.comment more{ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comment more"> 
 
\t <h2> Home</h2> 
 
    In reaction to Russian Prime Minister Dmitry Medvedev’s visit to Etorofu Island on Saturday, the government will stop making arrangements for Foreign Minister Fumio Kishida to visit Russia for the time being, government sources said. 
 

 
The move comes after the government felt strong resentment over the Russian prime minister’s visit to Etorofu, one of the four northern territories off Hokkaido. 
 

 
<br><br> 
 
    <ul> 
 
     \t <li> Text text kdfjlsdjflksjdflkjsldjfs</li> 
 
    <li>Text text kdfjlsdjflksjdflkjsldjfs</li></ul> 
 
</div>

Answer 1

我離開showChar未定義起初，然後搜查了HTML註釋<!-- break -->和使用，作爲showChar。通過這種方式，您可以完全控制設定斷點的位置。只需在您需要的文章中插入<!-- break -->即可。

$(document).ready(function() { 
 
    var ellipsestext = "...", 
 
    moretext = "more", 
 
    lesstext = "less", 
 
    showChar; 
 
    $('.more').each(function() { 
 
    var content = $(this).html(); 
 

 
    showChar = content.search(/<!\-\-\s*break\s*\-\->/); 
 
    if (content.length > showChar && showChar != -1) { 
 

 
     var c = content.substr(0, showChar); 
 
     var h = content.substr(showChar, content.length - showChar); 
 

 
     var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; 
 

 
     $(this).html(html); 
 
    } 
 

 
    }); 
 

 
    $(".morelink").click(function() { 
 
    if ($(this).hasClass("less")) { 
 
     $(this).removeClass("less"); 
 
     $(this).html(moretext); 
 
    } else { 
 
     $(this).addClass("less"); 
 
     $(this).html(lesstext); 
 
    } 
 
    $(this).parent().prev().toggle(); 
 
    $(this).prev().toggle(); 
 
    return false; 
 
    }); 
 
});

a { 
 
    color: #4088ff; 
 
} 
 
a:visited { 
 
    color: #4088ff; 
 
} 
 
a.morelink { 
 
    text-decoration: none; 
 
    outline: none; 
 
} 
 
.morecontent span { 
 
    display: none; 
 
} 
 
.comment more {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comment more"> 
 
    <h2> Home</h2> 
 
    In reaction to Russian Prime Minister Dmitry Medvedev’s visit to Etorofu Island on Saturday, the government will stop making arrangements for Foreign Minister Fumio Kishida to visit Russia<!-- break --> for the time being, government sources said. 
 

 
    The move comes after the government felt strong resentment over the Russian prime minister’s visit to Etorofu, one of the four northern territories off Hokkaido. 
 

 
    <br> 
 
    <br> 
 
    <ul> 
 
    <li>Text text kdfjlsdjflksjdflkjsldjfs</li> 
 
    <li>Text text kdfjlsdjflksjdflkjsldjfs</li> 
 
    </ul> 
 
</div>

Answer 2

使用利用var showChar = content.indexOf(".") + 1;此第一句的端部的位置被計算爲每個時間循環執行獲取的showChar值。

$(document).ready(function() { 
 
    //var showChar = 100; 
 
    var ellipsestext = "..."; 
 
    var moretext = "more"; 
 
    var lesstext = "less"; 
 
    $('.more').each(function() { 
 
     var content = $(this).html(); 
 
     var showChar = content.indexOf(".") + 1; 
 
     if(content.length > showChar) { 
 
      var c = content.substr(0, showChar); 
 
      var h = content.substr(showChar, content.length - showChar); 
 
      var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; 
 
      $(this).html(html); 
 
     } 
 
    }); 
 
    
 
    $(".morelink").click(function(){ 
 
     if($(this).hasClass("less")) { 
 
      $(this).removeClass("less"); 
 
      $(this).html(moretext); 
 
     } else { 
 
      $(this).addClass("less"); 
 
      $(this).html(lesstext); 
 
     } 
 
     $(this).parent().prev().toggle(); 
 
     $(this).prev().toggle(); 
 
     return false; 
 
    }); 
 
});

a { 
 
    color: #4088ff; 
 
} 
 
a:visited { 
 
    color: #4088ff; 
 
} 
 
a.morelink { 
 
    text-decoration:none; 
 
    outline: none; 
 
} 
 
.morecontent span { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="comment more"> 
 
\t <h2> Home</h2> 
 
    In reaction to Russian Prime Minister Dmitry Medvedev’s visit to Etorofu Island on Saturday, the government will stop making arrangements for Foreign Minister Fumio Kishida to visit Russia for the time being, government sources said. 
 

 
The move comes after the government felt strong resentment over the Russian prime minister’s visit to Etorofu, one of the four northern territories off Hokkaido. 
 
    <br/><br/> 
 
    <ul> 
 
     \t <li>Text text kdfjlsdjflksjdflkjsldjfs</li> 
 
     <li>Text text kdfjlsdjflksjdflkjsldjfs</li> 
 
    </ul> 
 
</div>