Customizable Multi-line Text Ellipsis Plugin - jQuery vEllipsis

vEllipsis is a lightweight yet highly customizable jQuery multi-line ellipsis plugin which automatically truncates text content based on a number of lines.

More features:

• Custom Read More and Read Less links.
• Custom expand/collapse animations.
• Auto re-truncate the text on window resize.
• Custom ellipsis character.
• Avoid cutting the text in the middle of a word.

Basic usage:

1. Put jQuery JavaScript library and the jQuery vEllipsis plugin's script jquery.vEllipsis.js at the bottom of the web page.

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

2. Add the CSS class 'v-ellipsis' to the target text wrapper.

<p class="v-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, tortor vel cursus suscipit, magna turpis malesuada metus, quis euismod orci dui ac tortor. Etiam sagittis lacinia odio vel mattis. Praesent cursus viverra fringilla. Nunc ut magna imperdiet, porta urna vel, dignissim elit. Ut non massa mauris. Donec varius, nisl nec tempor malesuada, arcu leo posuere ipsum, quis elementum urna metus et nibh. Mauris ut felis et felis facilisis euismod. Cras tempor ipsum ut nisl accumsan porttitor. Phasellus nec nulla justo. Cras sed euismod nibh. Nulla facilisi. Sed augue nisi, pretium at mi et, viverra gravida massa. Cras turpis ex, fermentum a interdum vel, consectetur dignissim purus. Vivamus condimentum eleifend vehicula. Nunc maximus ut felis eu interdum. Ut cursus nisl est, vel porttitor nulla viverra in.
</p>

3. Invoke the plugin with default options and done.

$( document ).ready(function() {
  $().vEllipsis();
});

4. If you want to show the Read More and Read Less links at the end of the text, follow these steps:

<p class="v-ellipsis" 
   data-expandlink="Read More" 
   data-collapselink="Read Less">
   Your Text Here
</p>

$( document ).ready(function() {
  $().vEllipsis({
    'expandLink': true,
    'collapseLink': true,
    'animationTime': '2000',
  });
});

5. Show an additional link after the ellipsis character.

<p class="v-ellipsis" 
   data-link="https://www.jqueryscript.net">
   Your Text Here
</p>

$( document ).ready(function() {
  $().vEllipsis({
    'additionalEnding': true
  });
});

6. Specify the number of lines to truncate.

$( document ).ready(function() {
  $().vEllipsis({

    'lines': 1

  });
});

7. More customization options.

$( document ).ready(function() {
  $().vEllipsis({

    // element identifier
    'element': '.v-ellipsis',           

    // true to avoid cutting the text in the middle of a word
    'onlyFullWords': false,

    // custom ellipsis char
    'char': '...',  

    // callback
    'callback': function () {},

    // auto reEllipsise after window resize
    'responsive': false,

    // optimal tolerance 
    'tolerance': 5,                     

    // delay after resize
    'delay': 300,                       

    // event to reEllipsise
    'elementEvent': 'change',           
    
    // class for changing number of lines
    'linesClass': 'v-ellipsis-lines'
    
  });
});

---

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