Question

让我们说有这个：

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 

    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 

    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 

    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

</div>
<div class="porfolio-single-load-more">
    <a href="#" class="icon-holder prevent-history">
        <i class="icon-plus"></i>
    </a>
</div>

我们只想显示前300个字符，当点击加载更多按钮时，显示其余文字，

我想解决方案是将超出的字符包装成隐藏的div，但我不知道该怎么做，

如何从char 301中包装，直到带有div的文本末尾？

var textcnt = this.mainCnt.find('.single-portfolio .content');
if(textcnt.text().length > 300){
    /* ?? */
}else{
        $('.porfolio-load-more a').remove();
 }

Answer 1

试试这个

var wtext = $('.content').html().substr(300);
$('.content').html( $('.content').html().substr(0, 300) + '<span class="hidden">' + wtext + '</span>' );

当然，这并不关心标签，因此不幸的是它会被分割到html标签的中间。在这种情况下，您需要进行某种检查以防止发生这种情况。

Answer 2

这里的问题是每行代码都是自己的DOM元素。如果你不能重构底层的html，你要做的就是迭代每个p元素，拉出HTML文本（并附加到一个字符串），擦除内容div，然后插入字符串加上一个div divider。

类似

var full = "";
$('.content').children('p').each(function(){
  full = full.concat($(this).html());
}
$('.content').html("");
var first = full.substring(0, 300);
var rest = full.substring(301);
$('.content').append(first + "</div><div id=\"hidden\">" + rest);

将以您想要的方式拆分div。将hidden的显示设置为none，然后使用$ .on（）将onclick处理程序附加到按钮以显示（）它

Answer 3

尝试使用jquery数据存储全文。我做了一个简单的测试。你可以尝试一下。

JavaScript的：

var $textcnt = $(".content p");
if($textcnt.text().length>300){
    $.data(document.body,"content",$textcnt.text());
    $textcnt.text($textcnt.text().substr(0,300)+"...");
}else
{
   $("#read-more").remove(); 
}

$("#read-more").click(function(){
    $textcnt.text($.data(document.body,"content"));
});

HTML：

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a id="read-more" href="#" class="icon-holder prevent-history">
        Read more
    </a>
</div>

这是 JSFIDDLE DEMO

希望这对你有所帮助。

Answer 4

我最终在桌面上添加了CSS ..

不打破标记非常棘手（特别是当用户更新它时没有HTML知识）

所以这就是我所做的：

var textcnt = this.mainCnt.find('.single-portfolio .content');
        if(textcnt.text().length > 300){
            /* ?? */
            textcnt.addClass('ellipsis');
            this.mainCnt.on('click','.porfolio-single-load-more a',function (e) {
                e.preventDefault();

                $('.porfolio-single-load-more a').fadeOut(300,function(){ textcnt.removeClass('ellipsis');$(this).remove(); });
            });
        }else{
            $('.porfolio-single-load-more a').remove();
        }

然后用css

.ellipsis{ max-height: 300px; /* som amount that matchs the line-height*font-size per line (ex: 5lines*18px*20px) */ }

自定义加载更多文本功能

4 个答案: