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

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

  


     

      

        

         

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc     
         
   
 
 

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