截断段落的前 100 个字符并隐藏段落的其余内容以显示/隐藏带有更多/更少链接的其余内容

IT技术 javascript jquery xhtml
2021-03-17 19:44:36

我有超过 500 个字符的段落。我只想获得最初的 100 个字符并隐藏其余的字符。我还想在 100 个字符旁边插入“更多”链接。单击更多链接时，整个段落应显示并将文本“更多”编辑为“更少”，单击“更少”时，它应切换行为。段落是动态生成的，我无法使用 .wrap() 包装它的内容。这是我所拥有的和我想要的示例。

这就是我所拥有的：

  <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text.</p>

这就是我在 DOM 加载时想要的 

 <p>It is a long established fact that a reader will be distracted by ..More</p>

当用户单击“更多”时，这就是我想要的

   <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text. ..Less</p>

当我们点击“Less”时，它应该恢复点击“More”时所做的。

我正在使用 jQuery 将子字符串拆分、切片和包装到我想隐藏的跨度中，但这不起作用。

var title = $("p").text();
var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
    .slice(0, -1).join(" ") + "...More >>";
shortText.wrap('</span>');
6个回答

小提琴：http : //jsfiddle.net/iambriansreed/bjdSF/

jQuery：

jQuery(function(){

    var minimized_elements = $('p.minimize');
    var minimize_character_count = 100;    

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < minimize_character_count ) return;

        $(this).html(
            t.slice(0,minimize_character_count )+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});​
这需要以下选项：(1) 截断单词，(2) 不去除行/段落中断。
2021-04-24 19:44:36
@Yokhannan - 以下是如何将函数更改为仅在换行符处截断：请参阅下面的我的分辨率（评论中没有足够的位置...）
2021-04-24 19:44:36
@Abela 如果将 (this).text 替换为 (this).html，它将保留您的换行符。
2021-04-24 19:44:36
这对我来说很好用。但是是否有可能在 p.minimize 元素中包含像链接这样的 html 元素？
2021-05-12 19:44:36
没问题，@RajMehta。只需确保最小化元素中的内容没有 HTML。
2021-05-15 19:44:36

这不是谷歌的顶级结果，但我已经使用jQuery Expander 插件取得了巨大的成功。这很好，因为它不会对搜索引擎机器人隐藏任何东西。

感谢@iambriansreed 的出色功能，这里有一个轻微的修改以在换行符处截断段落：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
jQuery(function(){

var minimized_elements = $('p.minimize');
var maxLines = 20;

minimized_elements.each(function(){    
    // var textArr = $(this).text().split(/\n/); // Not supported in IE < 9
    var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/);
    var countLines = textArr.length;

    if (countLines > maxLines) {
        text_less = textArr.slice(0, maxLines).join("<br>");
        text_more = textArr.slice(maxLines, countLines).join("<br>");
    }
    else return;

    $(this).html(
        text_less + '<span>... </span><a href="#" class="more">More</a>'+
        '<span style="display:none;">'+ text_more +' <a href="#" class="less">Less</a></span>'
    );
}); 

$('a.more', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();        
});

$('a.less', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();    
});

});

</script>

看起来其他几个人打败了我，但这就是我想出的。

var MORE = "... More...",
    LESS = " Less...";

$(function(){
    $("p").each(function(){
        var $ths = $(this),
            txt = $ths.text();

        //Clear the text
        $ths.text("");

        //First 100 chars
        $ths.append($("<span>").text(txt.substr(0,100)));

        //The rest
        $ths.append($("<span>").text(txt.substr(100, txt.length)).hide());

        //More link
        $ths.append(
            $("<a>").text(MORE).click(function(){
                var $ths = $(this);

                if($ths.text() == MORE){
                    $ths.prev().show();
                    $ths.text(LESS);
                }
                else{
                    $ths.prev().hide();
                    $ths.text(MORE);
                }
            })
        );
    });
});

你看过jQuery Truncator插件吗？

它几乎完全符合您的描述。

@RajMehta，然后您需要显示代码，以便我们可以看到您在做什么以及您遇到了什么问题。另一种选择，因为该插件是 MIT 许可的，你需要做的是查看他们的源代码，看看他们是如何做到的。
2021-04-30 19:44:36
我在上面添加了代码。看一看，如果您有任何提示，请告诉我。
2021-05-01 19:44:36
我不能使用插件。我想要它没有任何插件。
2021-05-02 19:44:36
其它你可能感兴趣的问题
上一篇这比。原型 下一篇Google Maps API 和 KML 文件 LocalHost 开发选项