Responsive Text Truncation jQuery Plugin - SmartEllipsis

File Size: 12.5 KB
Views Total: 207
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Text Truncation jQuery Plugin - SmartEllipsis

SmartEllipsis is a tiny responsive text truncation jQuery plugin that truncates long text snippets based on the container's height, adding an ellipsis to indicate continuation.

The jQuery plugin also maintains the CSS properties related to word wrapping and line breaking, delivering a clean, uncluttered appearance.

How to use it:

1. Download and place the jquery.smartEllipsis.js script after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.smartEllipsis.js"></script>

2. Call the function ellipsis on your text containers which have a fixed height as follows:

<div style="height:4em;" class="ellipsis">
  Your Long Text Here
</div>
<div style="height:4em; word-wrap: break-words;" class="ellipsis">
  Your Long Text Here
</div>
<div style="height:4em; white-space: nowrap;" class="ellipsis">
  Your Long Text Here
</div>
<div style="height:4em; word-wrap: break-words; white-space: nowrap;" class="ellipsis">
  Your Long Text Here
</div>
$(function(){ 
  $('.ellipsis').ellipsis();
});

3. Hide the overflowing text using CSS.

.ellipsis {
  overflow: hidden;
}

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