jquery - 在段落中找到第 N 个单词，添加一个 anchor ，然后隐藏剩余的文本

Question

我需要一种使用 jquery 强制“阅读更多”类型效果的方法。

我怀疑这样做会很困难，但我们开始吧。

拿这一段:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium。 Maecenas vel mi eu dui fugiat hendrerit。在 hac habitasse platea dictumst 中。 Aliquam turpis velit，facilisis non euismod id，convallis vitae orci。 Etiam rhoncus ante et risus sagittis euismod。

我想要这个:

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium。 点击这里阅读更多

<div class="hidden">Maecenas vel mi eu dui fugiat hendrerit。在 hac habitasse platea dictumst 中。 Aliquam turpis velit，facilisis non euismod id，convallis vitae orci。 Etiam rhoncus ante et risus sagittis euismod。 </div>

---

当“点击这里”被阅读时，“隐藏”的div会滑入查看。

不幸的是我无法控制这一段的输出，所以不管怎样都会输出整段。我需要尝试使用 JQUERY 或类似工具来选择大约 20 个字符，然后附加一个 anchor 和一个 <div>。隐藏其余文本。

它可能太复杂了，但我想不出其他方法。

我再说一遍 - 我无法更改段落的输出方式，但想要一种方法来尝试模拟“阅读更多”。

谢谢。

Answer 1

尝试这样的事情(demo):

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium. Maecenas vel mi eu dui feugiat hendrerit. In hac habitasse platea dictumst. Aliquam turpis velit, facilisis non euismod id, convallis vitae orci. Etiam rhoncus ante et risus sagittis euismod.</p>

脚本

$('p').each(function(){
    var $this = $(this);
    $this
        // save the height of the paragraph
        .data('height', $this.height() )
        // Show only the top line of the paragraph
        .css({
            overflow: 'hidden',
            height  : $this.css('lineHeight')
        })
        // add a clickable message
        .after('<div class="more">Click to read More</div>');

        $this.next().click(function(){
            // When clicked, restore the original height of the paragraph
            $this.animate({ height: $this.data('height')}, 500);
            // Hide the clickable link
            $(this).hide();
    });
});