Clip Overflowing Text With A Read More Button - ReadAll

ReadAll is a jQuery plugin that collapses part of your long text block and adds a Read More button at the bottom if the content exceeds a certain height or a specific number of rows.

Click the Read More button to reveal all the content and replace the Read More button with a Read Less button which allows you to collapse the text to the original state.

In addition, the plugin clips the overflowing content and applies a fade-out effect to the last line of your text using a linear gradient.

Fully responsive and mobile-friendly. The ReadAll functionality will automatically switch on and off depending on the block height after window resize.

How to use it:

1. Download the plugin and insert the JavaScript jquery.readall.js & Stylesheet jquery.readall.css into the HTML document.

<link href="/path/to/css/jquery.readall.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.readall.min.js"></script>

2. Call the function on the long text block.

<p>
  Text Here
  ...
</p>

$(function(){
  $('p').readall();
});

3. By default the plugin clips overflowing content when the block height is larger than 96px. You can customize the limit using the showheight parameters:

$('p').readall({
  showheight: 120
});

4. Or truncate your text to a specific number of lines:

$('p').readall({
  showheight: null,
  showrows: 3
});

5. Customize the animation speed when expanding & collapsing content. Default: 200.

$('p').readall({
  animationspeed: 300 
});

6. Customize the Read More & Read Less buttons.

$('p').readall({
  btnTextShowmore: 'Read more',
  btnTextShowless: 'Read less',
  btnClassShowmore: 'readall-button',
  btnClassShowless: 'readall-button'
});

7. Override the default linear gradient if the background color of the text block is NOT white.

.readall-hide:after {
  background: linear-gradient(to bottom, rgba(250,250,250, 0.1), #fafafa 75%);
}

Changelog:

v1.2 (2021-02-02)

• Replaced deprecated JQuery functions and event shorthands

---

This awesome jQuery plugin is developed by morriznet. For more Advanced Usages, please check the demo page or visit the official website.