0

假设我们有这个：

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

4 回答 4

0

我最终将 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) */ }
于 2013-07-11T20:03:49.280 回答
0

尝试这个

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

当然，这与标签无关，因此很遗憾它可以在 html 标签的中间进行拆分。在这种情况下，您需要进行某种检查以防止这种情况发生。

于 2013-07-11T09:14:44.307 回答
0

这里的问题是每一行代码都是它自己的 DOM 元素。如果你不能重构底层的 html，你需要做的是遍历每个 p 元素，取出 H​​TML 文本（并附加到一个字符串），擦除内容 div，然后插入字符串加上一个div 分隔符。

所以像

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。将隐藏的显示设置为无，然后使用 $.on() 将 onclick 处理程序附加到您的按钮以显示（）它

于 2013-07-11T09:19:54.247 回答
0

尝试使用 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 演示

希望这对你有帮助。

于 2013-07-11T09:28:16.777 回答