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

Question

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:

Answer 1

you can cut at spaces with something like this:

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

Answer 2

I hope the below one will help you.

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;
}

Answer 3

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

JS (With 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

<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/

Answer 4

I did a web search and found this plugin: 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.

Answer 5

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

.collapse hides content

.collapsing is applied during transitions

.collapse.show shows content You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required. 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

#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