jQuery 如何在段落末尾添加阅读更多链接？

How do I add a read more link at the end of a paragraph?

提问by Richard Bell

I am trying to add a link to read more text at the end of a paragraph. I would like this link to display within the paragraph at the end like so:

我正在尝试添加一个链接以在段落末尾阅读更多文本。我希望此链接显示在最后的段落中，如下所示：

I want the paragraph to be appended with the ... and the read more link.

我希望该段落附加...和阅读更多链接。

For now I don't want the read more link to do anything as I will add my own function to it once I get the link in place. I am just struggling to find a way to get the link to appear like this.

现在我不希望阅读更多链接做任何事情，因为一旦我得到链接，我就会向它添加我自己的功能。我只是在努力寻找一种方法让链接看起来像这样。

I have been looking at the following jquery script, however this seems to work on a character count and cuts the last word at whatever the character limit is and then doesn't display the way I want it to (the link appears below the paragraph). It also already contains a function for what happens when the link is clicked which due to my lack of ability with jquery, I have been unsuccessful at editing out.

我一直在查看以下 jquery 脚本，但是这似乎可以处理字符数并在字符限制是什么时剪切最后一个单词，然后不显示我想要的方式（链接出现在段落下方） . 它也已经包含一个功能，当链接被点击时会发生什么，由于我缺乏 jquery 的能力，我在编辑时没有成功。

$(function(){ /* to make sure the script runs after page load */
    $('.customer_experience').each(function(event){ /* select all divs with the  customer_experience class */
        var max_length = 250; /* set the max content length before a read more link will be added */

        if($(this).html().length > max_length){ /* check for content length */
            var short_content   = $(this).html().substr(0,max_length); /* split the content in two parts */
            var long_content    = $(this).html().substr(max_length);

            $(this).html(short_content+
                '<a href="#" class="read_more"><br/>read more...</a>'+
                '<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */

            $(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */
                event.preventDefault(); /* prevent the a from changing the url */
                $(this).parents('.customer_experience').find('.more_text').show(); /* show the .more_text span */
            });
        }
    });
});

Do I need to use jQuery at all to get the result I am looking for? Can this be done with CSS alone? I don't really write jQuery at all so I am a bit lost.

我是否需要使用 jQuery 才能获得我正在寻找的结果？这可以单独使用 CSS 来完成吗？我根本不会写 jQuery，所以我有点迷茫。

Any help or hints at where I can go with this would be much appreciated.

任何关于我可以去哪里的帮助或提示将不胜感激。

Edited to add HTML Mark-up

编辑以添加 HTML 标记

<div class='comments_container'>
    <img src='images/comment-icon.png'/>
    <h1 class='comments_title'>Customer experience</h1>
    <p class='customer_experience'>$customer_exp_one</p>
</div>

The paragraph in question is .customer_experience.

有问题的段落是.customer_experience。

回答by vinothini

I hope the below one will help you.

我希望下面的一个能帮到你。

http://jsfiddle.net/X5r8r/1156/

http://jsfiddle.net/X5r8r/1156/

body, input {
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
}
a {
    color: #0254EB
}
a:visited {
    color: #0254EB
}
#header h2 {
    color: white;
    background-color: #00A1E6;
    margin: 0px;
    padding: 5px;
}
.comment {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
}
a.morelink {
    text-decoration: none;
    outline: none;
}
.morecontent span {
    display: none;
}

回答by S.Visser

For cutting off paragraphs. This script checks the paragraph count, not the word count.

用于截断段落。此脚本检查段落数，而不是字数。

JS (With Jquery)

JS（使用 Jquery）

$(document).ready(function() {

    /* Count of paragraphs shown */
    var cutCount = 2;

    $("#testID p").each(function (i) {
        i++;
        if(i == cutCount) {
            $(this).append(' <a href="javascript:void(1)" onclick="$(\'#testID p\').show(); $(this).hide()">Read more</b>')   
        }
        if(i > cutCount) {
           $(this).hide();
        }
    });

});

HTML

HTML

<div id="testID">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas lobortis mi, quis convallis arcu interdum id. Nunc velit justo, congue ac vestibulum eu, sodales sed nulla. Nam semper egestas nunc, placerat suscipit lorem fringilla sit amet. Etiam id metus quis tellus luctus rhoncu</p>

<p>Donec euismod, dui aliquam vestibulum rutrum, urna ipsum luctus justo, in eleifend tellus ligula et elit. Morbi gravida lacinia magna quis faucibus. Duis arcu ligula, euismod sed ornare quis, posuere ac quam. Sed orci metus, pretium ut blandit sed, ullamcorper in eros. Mauris at euismod diam. Quisque auctor congue erat et varius. Nulla odio orci, convallis non fringilla vel.</p>

<p>Curabitur a velit eu lacus vestibulum vehicula. Proin mi velit, tempor quis convallis vulputate, adip</p>

<p>Nullam eget pulvinar arcu. Nam tellus tortor, luctus non rutrum eget, condimentum ac lectus. Nulla diam tellus, aliquet non auctor nec, bibendum nec orci. Proin rhoncus sodales sapien, sit amet eleifend erat sagittis quis. Ut et urna et erat venenatis convallis at sit amet sem. Quisque tempus sodales ornare. Maecenas eget nisi et ligula facilisis dictum.</p>

<p>Etiam lectus dolor, tincidunt a ultricies et, vehicula ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean bibendum suscipit nunc sit amet ultrices. Praesent nunc velit, dignissim eget tincidunt non, varius at velit. Aliquam ac interdum lectus. Nulla a ante lacinia arcu suscipit suscipit a nec mauris. In sed tempor massa. Donec luctus dapibus dolor, vel mattis justo pulvinar eget. Pellentesque scelerisque dolor ut erat cursus ornare. In in nunc et tellus consequat convallis id sed est. Integer dictum fermentum tempus. Ut lobortis ante vel ante condimentum lacinia. Donec malesuada pretium sapien, et euismod turpis faucibus at. Duis vel turpis ultrices enim viverra vestibulum vitae sed sapien.</p>

</div>

Example http://jsfiddle.net/9bXQh/2/

示例 http://jsfiddle.net/9bXQh/2/

回答by lordvlad

you can cut at spaces with something like this:

你可以用这样的东西在空格处切割：

$(this).html().substr(0, $(this).html().indexOf(" ", max_length))

回答by Derek Henderson

I did a web search and found this plugin: http://dotdotdot.frebsite.nl/.

我进行了网络搜索，找到了这个插件：http: //dotdotdot.frebsite.nl/。

I guess that doesn't really answer your question, just points you in the direction of a possible solution. It seems this plugin allows you to do what you want: truncate the text when it exceeds a fixed-height container, add a 'read more' link, and bind your own custom function to the 'read more' link.

我想这并不能真正回答您的问题，只是为您指明了可能的解决方案的方向。看起来这个插件可以让你做你想做的事：当文本超过固定高度的容器时截断文本，添加一个“阅读更多”链接，并将你自己的自定义函数绑定到“阅读更多”链接。

回答by Kondal

Click the buttons below to show and hide another element via class changes:

单击下面的按钮以通过类更改显示和隐藏另一个元素：

.collapsehides content

.collapse隐藏内容

.collapsingis applied during transitions

.collapsing在过渡期间应用

.collapse.show shows content You can use a link with the hrefattribute, or a button with the data-targetattribute. In both cases, the data-toggle="collapse"is required. HTML

.collapse.show 显示内容 您可以使用带有href属性的链接，或带有data-target属性的按钮。在这两种情况下，data-toggle="collapse"都需要。HTML

  <div class="container">

     <div class="row justify-content-center">
      <div class="col-md-4">
        <div id="parent">
         <p class="collapse" id="collapseParent">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc     </p>
         <a class="collapsed" data-toggle="collapse" href="#collapseParent" aria-expanded="false" aria-controls="collapseParent"></a>
   </div>
 </div> 

CSS

CSS

#parent {
   font-size: 14px;
   line-height: 1.5;
}

#parent p.collapse:not(.show) {
   height: 42px !important;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;  
  }

#parent p {
    min-height: 42px !important;
}

 #parent a.collapsed:after  {
     content: 'Read More';
  }

  #parent a:not(.collapsed):after {
      content: 'Read Less';
  }

CodePen Example

代码笔示例