Question

我希望从段落字符摘要中的100个字符之后对div内的段落进行切片：

这是我的代码：

 jQuery(function () {

        var minimized_elements = $('div.minimize');

        minimized_elements.each(function () {
            var t = $(this).text();
            if (t.length < 100) return;

            $(this).html(
                t.slice(0, 100) + '<span>... </span><a href="#" class="more">Read More</a>' +
                '<span style="display:none;">' + t.slice(100, 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();
        });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="minimize">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium ultrices lacus non congue. Maecenas a augue suscipit, ullamcorper ex ut, maximus purus. In ac pellentesque justo. Proin metus sem, commodo vel aliquet blandit, varius a lacus. Aenean id turpis et leo congue fringilla. Nullam quis ultrices neque, nec pharetra diam. Integer et purus vitae massa pharetra gravida vitae malesuada lorem. Integer auctor dui eu posuere auctor.</p>	
	<p>Aliquam facilisis fermentum ex, quis interdum quam imperdiet eget. In hac habitasse platea dictumst. Nulla laoreet, purus in viverra varius, leo dolor consectetur urna, eget efficitur lacus odio sagittis massa. Mauris tincidunt vel augue nec eleifend. Integer blandit fringilla libero, eu volutpat justo aliquam vitae. Sed gravida sollicitudin urna in tincidunt. Integer eu velit ac enim dictum mollis. Integer condimentum egestas ante nec congue.</p>	
	</div>

... auctor之间应该有一个段落中断。还有阿里夸姆…… 感谢您的帮助。

谢谢

Answer 1

按原样生成预览版本并将其切换为原始版本可能会更简单。如果您具有更复杂的标记（例如列表），它将更加健壮。

 jQuery(function() {

  var minimized_elements = $('div.minimize');

  minimized_elements.each(function() {
    var t = $(this).text();
    if (t.length < 100) return;

    $(this).append('<a href="#" class="less">Show Less</a>')
    $(this).wrapInner('<div class="original"></div>');

    $(this).append('<div class="intro"><p>' +
      t.slice(0, 100) +
      '<span>... </span><a href="#" class="more">Read More</a></p></div>'
    );

    $(this).find('.original').hide();
  });

  $('a.more', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).closest('.intro').hide().prev('.original').show();
  });

  $('a.less', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).closest('.original').hide().next('.intro').show();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="minimize">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium ultrices lacus non congue. Maecenas a augue suscipit, ullamcorper ex ut, maximus purus. In ac pellentesque justo. Proin metus sem, commodo vel aliquet blandit, varius a lacus. Aenean id turpis et leo congue fringilla. Nullam quis ultrices neque, nec pharetra diam. Integer et purus vitae massa pharetra gravida vitae malesuada lorem. Integer auctor dui eu posuere auctor.</p>	
	<p>Aliquam facilisis fermentum ex, quis interdum quam imperdiet eget. In hac habitasse platea dictumst. Nulla laoreet, purus in viverra varius, leo dolor consectetur urna, eget efficitur lacus odio sagittis massa. Mauris tincidunt vel augue nec eleifend.</p>	
	</div>

Fiddle

在div中截断多个段落，但保持html格式

1 个答案: