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

Question

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

======工作代码======

＆＃13;

＆＃13;

// 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;
    });

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

function limitWords(element, quantity){

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

   var words = text.split(" ");

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

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

}

＆＃13;

＆＃13;

＆＃13;

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) {
     
				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(" ");
                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;
    });