Simple jQuery Text Overflow Ellipsis Plugin

text-overflow-ellipsis.js is a jQuery plugin for adding in client-side multi-line text overflow based on line number. Adds in a simple ellipsis (...) at the end of each visible line, with ability to show/hide the full text on click of the view more link. 

How to use it:

1. To use this plugin, first you need to include the main JavaScript file text-overflow-ellipsis.js after jQuery library as this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/text-overflow-ellipsis.js"></script>

2. Then initialize the plugin and we're ready to go.

$("[data-lines]").textOverflowEllipsis();

3. Finally, add the 'data-lines' attribute to the target text container. In this case, the DIV element has the attribute data-lines="2". We have a lot of text here, but we want it to overflow correctly. We want to cut off the text at a specific line using the "data-lines='xx'" attribute, so we have the option of 1 to however many lines of text desired. Also added in a specific "view more" link that animates the full text in on click, sliding down or back up depending on if it is open or not already.

<div class="short-description js-ellipsis" data-lines="2">
  <div class="full">Suspendisse sollicitudin elit at nulla elementum, eu facilisis nulla iaculis. Suspendisse et aliquet dolor. Sed aliquam scelerisque posuere. Proin ante lectus, iaculis a nisi ac, maximus eleifend magna. Donec lobortis, magna id molestie porttitor, sapien ante viverra sapien, sed ultricies odio felis eget nibh. Praesent ut gravida libero. Phasellus a accumsan nibh. Pellentesque diam lacus, tincidunt in ornare aliquet, efficitur in erat. Suspendisse at orci pellentesque ante tempor rhoncus vitae a libero. In pellentesque tellus auctor quam condimentum, non dignissim lectus ullamcorper. Vestibulum ullamcorper, ligula sed auctor scelerisque, est nunc eleifend felis, vel molestie neque ex nec diam. Aenean aliquet rutrum sagittis. Integer et nisi sollicitudin nibh placerat accumsan. Maecenas mollis risus a varius sagittis. Integer tristique lacus tristique, egestas ex ac, varius turpis.</div>
  <div class="short"></div>
</div>

4. Customize the 'View More' link in the CSS:

.view-more {
  ...
}

---

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