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

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.