Read More jQuery Plugin

doLessMore is a read more/read less jQuery plugin that truncates multi-line text by height and appends a toggle control to allow you to reveal or hide the truncated content.

doLessMore JavaScript Library Implementation

Include the jQuery doLessMore plugin after jQuery library

Truncate a long block of text if it is higher than 100px.

  
Your Long Content Here

The required CSS styles

.paragraph { overflow: hidden; }
.paragraphblock { position: relative; }
.ds-control {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: #fff;
  text-align: center;
}
.dlmexpand { padding-bottom: 20px; }

Customize the height option which will trigger the text truncating

$(function(){
  $('.paragraph').paragraph({
    lHeight : 100
  });
});

Override the default toggle icon(https://remixicon.com/) in the JS

if(this.autoHeight > this.options.lHeight){
  $(el)
    .addClass('paragraphblock')
    .addClass('dvstkcontract')
    .height(this.options.lHeight)
    // override icon classes here
    .append('
');
  
  this.lmControl(this.autoHeight);
}