Clip Overflowing Text With A Read More Button - ReadAll

File Size: 12 KB
Views Total: 5818
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  Text Here

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:

  showheight: 120

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

  showheight: null,
  showrows: 3

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

  animationspeed: 300 

6. Customize the Read More & Read Less buttons.

  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%);


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.