Question

下面你会找到我的JSFiddle。我在第一段上限制了500个字符，这就是＆＃34;更多＆＃34;链接被添加，然后在＆＃34;更多＆＃34;链接我只是隐藏该段落的其余内容以及以下所有段落。

我的问题在于最后一组段落。我在集合的开头有一个段落，不到500个字符，所以它不考虑规则。如何保持段落布局，但在多个段落中包含文本的字数帐户。

我很乐意提供更多细节。提前谢谢。

的jsfiddle：

HTML：

<div class="readMoreContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et magna velit. Sed quis enim non risus dapibus accumsan. Nunc dapibus ante non leo dapibus rhoncus. Nunc nunc lorem, tristique a sodales a, ultricies vitae ipsum. Nam finibus lorem nec est fermentum, vitae suscipit lacus aliquam. Vivamus egestas laoreet justo, non pulvinar quam tristique vitae. Vestibulum gravida risus purus, ac egestas mi vestibulum vitae. Quisque sagittis convallis lorem, vel iaculis eros placerat vitae. Etiam ultricies metus justo. Donec in diam metus. In eu nisi et velit luctus vehicula vitae in nisi. Vivamus tempor interdum dignissim. Vivamus viverra odio quis mauris mollis aliquam. Integer eu rutrum lectus, ut tempus erat. Phasellus ut lectus vitae elit luctus laoreet vel sit amet lorem. Maecenas consequat nunc vel libero feugiat, sed tristique sapien imperdiet. Fusce quis lobortis justo, eget ultricies eros. Integer feugiat tortor a enim vulputate eleifend. Proin malesuada metus venenatis se.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et magna velit. Sed quis enim non risus dapibus accumsan. Nunc dapibus ante non leo dapibus rhoncus. Nunc nunc lorem, tristique a sodales a, ultricies vitae ipsum. Nam finibus lorem nec est fermentum, vitae suscipit lacus aliquam. Vivamus egestas laoreet justo, non pulvinar quam tristique vitae. Vestibulum gravida risus purus, ac egestas mi vestibulum vitae. Quisque sagittis convallis lorem, vel iaculis eros placerat vitae. Etiam ultricies metus justo. Donec in diam metus. In eu nisi et velit luctus vehicula vitae in nisi. Vivamus tempor interdum dignissim. Vivamus viverra odio quis mauris mollis aliquam. Integer eu rutrum lectus, ut tempus erat. Phasellus ut lectus vitae elit luctus laoreet vel sit amet lorem. Maecenas consequat nunc vel libero feugiat, sed tristique sapien imperdiet. Fusce quis lobortis justo, eget ultricies eros. Integer feugiat tortor a enim vulputate eleifend. Proin malesuada metus venenatis se.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et magna velit. Sed quis enim non risus dapibus accumsan. Nunc dapibus ante non leo dapibus rhoncus. Nunc nunc lorem, tristique a sodales a, ultricies vitae ipsum. Nam finibus lorem nec est fermentum, vitae suscipit lacus aliquam. Vivamus egestas laoreet justo, non pulvinar quam tristique vitae. Vestibulum gravida risus purus, ac egestas mi vestibulum vitae. Quisque sagittis convallis lorem, vel iaculis eros placerat vitae. Etiam ultricies metus justo. Donec in diam metus. In eu nisi et velit luctus vehicula vitae in nisi. Vivamus tempor interdum dignissim. Vivamus viverra odio quis mauris mollis aliquam. Integer eu rutrum lectus, ut tempus erat. Phasellus ut lectus vitae elit luctus laoreet vel sit amet lorem. Maecenas consequat nunc vel libero feugiat, sed tristique sapien imperdiet. Fusce quis lobortis justo, eget ultricies eros. Integer feugiat tortor a enim vulputate eleifend. Proin malesuada metus venenatis se.</p></div>

<div class="readMoreContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et magna velit. Sed quis enim non risus dapibus accumsan. Nunc dapibus ante non leo dapibus rhoncus. Nunc nunc lorem, tristique a sodales a, ultricies vitae ipsum. Nam finibus lorem nec est fermentum, vitae suscipit lacus aliquam. Vivamus egestas laoreet justo, non pulvinar quam tristique vitae. Vestibulum gravida risus purus, ac egestas mi vestibulum vitae. Quisque sagittis convallis lorem, vel iaculis eros placerat vitae. Etiam ultricies metus justo. Donec in diam metus. In eu nisi et velit luctus vehicula vitae in nisi. Vivamus tempor interdum dignissim. Vivamus viverra odio quis mauris mollis aliquam. Integer eu rutrum lectus, ut tempus erat. Phasellus ut lectus vitae elit luctus laoreet vel sit amet lorem. Maecenas consequat nunc vel libero feugiat, sed tristique sapien imperdiet. Fusce quis lobortis justo, eget ultricies eros. Integer feugiat tortor a enim vulputate eleifend. Proin malesuada metus venenatis se.</p></div>

<div class="readMoreContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et magna velit. Sed quis enim non risus dapibus accumsan.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et magna velit. Sed quis enim non risus dapibus accumsan. Nunc dapibus ante non leo dapibus rhoncus. Nunc nunc lorem, tristique a sodales a, ultricies vitae ipsum. Nam finibus lorem nec est fermentum, vitae suscipit lacus aliquam. Vivamus egestas laoreet justo, non pulvinar quam tristique vitae. Vestibulum gravida risus purus, ac egestas mi vestibulum vitae. Quisque sagittis convallis lorem, vel iaculis eros placerat vitae. Etiam ultricies metus justo. Donec in diam metus. In eu nisi et velit luctus vehicula vitae in nisi. Vivamus tempor interdum dignissim. Vivamus viverra odio quis mauris mollis aliquam. Integer eu rutrum lectus, ut tempus erat. Phasellus ut lectus vitae elit luctus laoreet vel sit amet lorem. Maecenas consequat nunc vel libero feugiat, sed tristique sapien imperdiet. Fusce quis lobortis justo, eget ultricies eros. Integer feugiat tortor a enim vulputate eleifend. Proin malesuada metus venenatis se.</p></div>

JS：

$(".readMoreContent").each(function() {

    var paragraphs = $(this).find('p');
    var counter = 1;
    var ellipses = '<span class="ellipses"> ... </span>';
    var more = ' <a href="#" class="more">More</a>';
    var less = ' <a href="#" class="less">Less</a>';

    paragraphs.each(function(){  

        if(counter==1){

            $(this).addClass("first");

            var t = $(this).text();

            if(t.length < 500) return;
                $(this).html(t.slice(0,500)+ellipses+more+'<span class="hiddenPart">'+t.slice(500,t.length)+'</span>');
                $(this).parent().children().last().append(less);
            } else {
                $(this).hide();
        }

        counter++;

    });

    $('.hiddenPart').hide();

    $('.less').hide();

    $('.more').click(function(event){
        event.preventDefault();
        $(this).hide();
        $(this).prev().hide();
        $(this).next().show();
        $(this).parent().nextAll().show();
        $(this).parent().parent().find('.less').show();
    });

    $('a.less').click(function(event){
        event.preventDefault();
        $(this).hide();
        $(this).parent().parent().find('.ellipses,.more').show();
        $(this).parent().parent().find('.first').find('.hiddenPart').hide();
        $(this).parent().parent().find('p').not('.first').hide();
    });

});

替代解决方案的想法：

我可以得到所有＆＃34; .html＆＃34;而不是＆＃34; .text＆＃34;但后来我需要以某种方式告诉char计数不包括＆＃34; p＆＃34;标签，然后用＆＃34; p＆＃34;将html吐出来。标签在正确的位置。这是我能想到的唯一解决方案，但我甚至不知道从哪里开始。

jQuery - 阅读更多 - 具有字符限制的多个段落

0 个答案: