Responsive Multi-line Text Truncating Plugin - ellipsis

File Size: 3.54 KB
Views Total: 3737
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Multi-line Text Truncating Plugin - ellipsis

ellipsis is a lightweight, responsive jQuery multi-line text truncation plugin which allows to limit the long texts by a certain number of lines. In addition, the plugin will add an ellipsis to the end of the truncated text.

How to use it:

1. To get stated, you need to include the jQuery ellipsis plugin after loading jQuery library.

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

2. Wrap you text into a container element and specify the number of lines to truncate using the data-ellipsis attribute.

<div class="ellipsis" data-ellipsis="2">
  The MIT License is a free software license originating at the Massachusetts Institute of Technology (MIT).[1] It is a permissive free software license, meaning that it puts only very limited restriction on reuse and has therefore an excellent license compatibility.[2][3] The MIT license permits reuse within proprietary software provided all copies of the licensed software include a copy of the MIT License terms and the copyright notice. The MIT license is also compatible with many copyleft licenses, such as the GPL; MIT licensed software can be integrated into GPL software, but not the other way around.[4]
</div>

3. Hide the overflow.

.ellipsis {
  overflow:hidden;
}

4. Call the function on the text container and done.

$('.ellipsis').ellipsis();

5. Auto refresh the plugin on window resize (OPTIONAL).

$( window ).resize(function() {
  $('.ellipsis').ellipsis();
});

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