jQuery Plugin To Truncate Long Text By Height - readMoreFade

readMoreFade is a jQuery plugin for creating collapsible and expandable content where the text fades out at the bottom and has a "Read More" button.

How to use it:

1. Wrap your long text into a DIV container as this:

<div id="fadeMe">
  <p>
    Content here ...
  </p>
</div>

2. Place jQuery library and the jQuery readMoreFade plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="readMoreFade.js"></script>

3. Active the plugin on the text container.

$('#fadeMe').readMoreFade();

4. The required CSS styles for the text fade effect.

.readMoreFade {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,0,0,0)), color-stop(1, rgba(255,0,0,100)));
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 30px 0 30px 0;
}

---

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