使用JavaScript显示隐藏文本不是字符

Question

我发现这个代码很好用，但它是按字符计数的。因此这些单词有时并不完整，当你点击阅读更多时，它会在单词中创建一个空格。我还发现了如何用文字计数的功能，但我不知道如何合并两者。下面是我的工作代码和功能 感谢

======工作守则======

// Show more text option -campaing page 
 
    var showChar = 196; // How many characters are shown by default 
 
    var ellipsestext = "..."; 
 
    var moretext = "Read more"; 
 
    var lesstext = "Read less"; 
 
    
 
    //Cut content based on showChar length 
 
    if ($(".toggle-text").length) { 
 
     $(".toggle-text").each(function() { 
 

 
      var content = $(this).html(); 
 
     
 
      if(content.length > showChar) { 
 
     
 
       var contentExcert = content.substr(0, showChar); 
 
       var contentRest = content.substr(showChar, content.length - showChar); 
 
       var html = contentExcert + '<span class="toggle-text-ellipses">' + ellipsestext + ' </span> <span class="toggle-text-content"><span>' + contentRest + '</span><a href="javascript:;" class="btn btn--primary btn--dark toggle-text-link">' + moretext + '</a></span>'; 
 
     
 
       $(this).html(html); 
 
      } 
 
     }); 
 
    } 
 
    
 
    //Toggle content when click on read more link 
 
    $(".toggle-text-link").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; 
 
    });

======功能代码======

function limitWords(element, quantity){ 
 

 
    var text = $(element).text(); 
 

 
    var words = text.split(" "); 
 

 
    quantity = Math.min(quantity, words.length); 
 

 
    $(element).text(words.slice(0,quantity) + "..."); 
 

 
}

Answer 1

这里亚去：

var charCount = 0; 
var contentExcert = content.split(" ").map((n)=>{ 
    charCount += n.length + 1; 
    return charCount - 1 <= showChar ? n : false; 
}).filter(n=>n).join(" "); 
charCount = 0; 
var contentRest = content.split(" ").map((n)=>{ 
    charCount += n.length + 1; 
    return charCount - 1 >= showChar ? n : false; 
}).filter(n=>n).join(" "); 

Answer 2

// Show more text option -campaing page 
 
    var showChar = 196; // How many characters are shown by default 
 
    var ellipsestext = "..."; 
 
    var moretext = "Read more"; 
 
    var lesstext = "Read less"; 
 
    
 
    //Cut content based on showChar length 
 
    if ($(".toggle-text").length) { 
 
     $(".toggle-text").each(function() { 
 

 
      var content = $(this).html(); 
 
     
 
      if(content.length > showChar) { 
 
     
 
\t \t \t \t var charCount = 0; 
 
\t \t \t \t var contentExcert = content.split(" ").map((n)=>{ 
 
\t \t \t \t \t charCount += n.length + 1; 
 
\t \t \t \t \t return charCount - 1 <= showChar ? n : false; 
 
\t \t \t \t \t }).filter(n=>n).join(" "); 
 
\t \t \t \t \t charCount = 0; 
 
\t \t \t \t var contentRest = content.split(" ").map((n)=>{ 
 
\t \t \t \t \t charCount += n.length + 1; 
 
\t \t \t \t \t return charCount - 1 >= showChar ? n : false; 
 
\t \t \t \t \t }).filter(n=>n).join(" "); 
 
       var html = contentExcert + '<span class="toggle-text-ellipses">' + ellipsestext + ' </span> <span class="toggle-text-content"><span>' + contentRest + '</span><a href="javascript:;" class="btn btn--primary btn--dark toggle-text-link">' + moretext + '</a></span>'; 
 
     
 
       $(this).html(html); 
 
      } 
 
     }); 
 
    } 
 
    
 
    //Toggle content when click on read more link 
 
    $(".toggle-text-link").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; 
 
    });