Limit Text Length To A Specific Number Of Lines - Read More

A simple jQuery based multi-line text truncation solution that trims the text to a specific number of lines, with or without Read More & Read Less buttons.

The plugin adds ellipsis (...) to the end of the text after truncated and your users can reveal the rest content by clicking the Read More link.

See Also:

• 10 Best Multi-line Text Truncation Plugins In JavaScript

How to use it:

1. Load the JavaScript file jquery-read-more.min.js after loading jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-read-more.min.js"></script>

2. Attach the plugin to your text block and determine the number of lines to retain after truncating.

<p class="text-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>

$(function(){
  $(".text-block").readMore({
    lines: 2
  })
});

3. Attach the plugin to your text block and determine the number of lines to retain after truncating.

<p class="text-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>

$(function(){
  $(".text-block").readMore({
    lines: 2
  })
});

4. Create a Read More button to expand & collapse the text block with a smooth slide animation. Don't forget to specify the selector of the Read More element using the data-controller attribute as follows:

<p class="text-block" data-controller="#readMore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<a id="readMore">Read more</a>

5. Customize the Read More and Read Less buttons.

$(function(){
  $(".text-block").readMore({
    readMoreLabel: "Read more",
    readLessLabel: "Read less",
  })
});

6. Customize the ellipsis and splitting characters.

$(function(){
  $(".text-block").readMore({
    ellipsis:  "...",
    splitOn: " " // String or Regex
  })
});

7. Destroy the plugin when needed.

$(".text-block").readMore('destroy');

---

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