Javascript 使用jQuery缩短基于单词而非字符的长文本块以显示阅读更多信息 客观的 用“…显示更多”将长文本减少为六个单词 展开后再次折叠文本的方法 总结

我想剪切文本以显示扩展内容的“.阅读更多”链接。这应该根据字数而不是字符数来切断。我只想显示前6个单词

我还需要通过单击“显示较少”按钮再次展开折叠文本

现状 我在我的开发网站上做了这项工作，但我不得不削减到36个字，这是一个接近6个字的数字。这是我安排的

前期研究 我搜索了各种类似的问题，但解决了如何根据字符而不是字数折叠的问题。比如说,

我读了这篇文章，但不清楚如何将其整合到我的项目中：

---

代码 HTML

培根益普生多乐艾美牛排香肠肩、鸡肉卷和肉丸。菲力牛排、里脊肉、意大利熏火腿、三尖牛肋排、肩肉、t骨恶魔岛凯文

Javascript

$（函数（）{
$（'.ticket text'）。每个（函数（事件）{
var max_length=36；
if（$（this.html（）.length>max_length）{
var short_content=$（this.html（）.substr（0，最大长度）；
var long_content=$（this.html（）.substr（最大长度）；
$（this）.html（短内容）+
''+
''+长_内容+''；
$（this）.find（'a.read_more'）。单击（函数（事件）{
event.preventDefault（）；
$（this.hide（）；
$（this）.parents（'.ticket text'）.find（'.more_text'）.show（）；
}); 
}   
});
});

当您有6个以上的单词时，您可以拆分单词并执行“显示更多”，然后更改为“显示更少”，以便再次隐藏长文本：

$（'.ticket text'）。每个（函数（）{
var words=$（this.text（）.split（“”）；
var-maxWords=6；
如果（words.length>maxWords）{
html=words.slice（0，maxWords）+''+words.slice（maxWords，words.length）+'+''
$（this）.html（html）
$（this）。查找（'a.read_more'）。单击（函数（事件）{
$（此）.toggleClass（“较少”）；
event.preventDefault（）；
if（$（this）.hasClass（“更少”））{
$（this.html（“
[Read Less]”）
$（this.parent（）.find（“.more_text”）.show（）；
}否则{
$（this.html（“…
[阅读更多]”）
$（this.parent（）.find（“.more_text”）.hide（）；
}
})
}
})

培根ipsum dolor amet牛排香克利肩、鸡肉卷和肉丸。菲力牛排、里脊肉、意大利熏火腿、三尖牛肋排、肩肉、t骨恶魔岛凯文
短文本

这很有帮助。现在的新挑战是单词后面加了逗号（有时是2），单词之间没有空格。@JGallardo更新。你需要做其他的事情来保持文本上的逗号和点，虽然这对我来说是新的。我很好奇逗号是从哪里产生的。我很高兴能将这一点缩减到六个字，但添加逗号和无空格的新问题似乎增加了一个问题。你的第二行删除句点，但我不能这样做，因为它是一个段落，所以会使它完全不可读。@JGallardo是的，这样做有点困难。jsfiddle上的示例是可行的，尽管文本没有像原始文本那样完全复制，但它是可以理解的。您可以使用自己的函数来附加words+space或逗号和点，而不是words.slice（）。出于某种原因，当我在我的页面上使用这段代码时，它在一些逗号和句点之前添加了随机空格。但这太好了，谢谢你。

<p class="ticket-text">Bacon ipsum dolor amet beef ribs shankle shoulder, chicken meatloaf andouille meatball. Filet mignon pork tenderloin prosciutto porchetta andouille, strip steak tri-tip biltong beef ribs shoulder doner t-bone alcatra kevin.</p>

$(function(){
    $('.ticket-text').each(function(event){
        var max_length = 36;

        if($(this).html().length > max_length){

            var short_content   = $(this).html().substr(0,max_length);
            var long_content    = $(this).html().substr(max_length);

            $(this).html(short_content+
                    '<a href="#" class="read_more">...<br>[Read More]</a>'+
                    '<span class="more_text" style="display:none;">'+long_content+'</span>');

            $(this).find('a.read_more').click(function(event){ 
                event.preventDefault();
                $(this).hide();
                $(this).parents('.ticket-text').find('.more_text').show();
            }); 
        }   
    });
});