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

Posted 2023-04-12

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

【英文标题】：Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link

【发布时间】：2012-07-10 04:18:02

【问题描述】：

我有超过 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 将子字符串拆分、切片和包装到我想隐藏但不起作用的 span 中。

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

【问题讨论】：

你试过什么？也许你可以发布一些代码来展示你的尝试

我添加了代码示例。 var shortText 我想将它包装到 span 标签中。但 .wrap() 不起作用。

【参考方案1】：

小提琴：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();    
    );

);​

【讨论】：

没问题，@RajMehta。只需确保最小化元素中的内容没有 HTML。

这需要以下选项：(1) 截断单词，(2) 不去除换行符/分段符。

@Yokhannan - 以下是如何将函数更改为仅在 换行符上截断：请参阅下面的解决方案（评论中没有足够的位置...）

这对我来说很好用。但是是否有可能在 p.minimize 元素中包含像链接这样的 html 元素？

@Abela 如果您将 (this).text 替换为 (this).html，它将保留您的换行符。

【参考方案2】：

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

【参考方案3】：

感谢@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>

【参考方案4】：

看起来其他几个人比我先，但这是我想出的。

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

【参考方案5】：

你看过jQuery Truncator插件吗？

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

【讨论】：

我无法使用插件。我想要它没有任何插件。

@RajMehta，然后您需要显示代码，以便我们可以看到您在做什么以及遇到的问题。另一种选择，因为该插件是 MIT 许可的，并且你需要做的是查看他们的源代码，看看他们是如何做到的。

我在上面添加了代码。看看，如果你有任何提示，请告诉我。

【参考方案6】：

对于所有来这里寻找更多节目的人... 这里还有一个插件http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/