Truncate Text With Ellipsis Using jQuery - Text-Ellipses
File Size: | 3.98 KB |
---|---|
Views Total: | 1667 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Text-Ellipses is a very small jQuery text truncation plugin which can be used to shorten text with ellipsis inside a specific DOM element.
The plugin dynamically adds custom text to your DOM elements and truncate the text to a number of characters you specify.
Also supports the hoverExpand
functionality that enables the user to reveal the full text on mouse hover.
How to use it:
1. Import jQuery JavaScript library and the jQuery Text-Ellipses plugin's script into the html document.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="src/text-ellipses.jquery.js"></script>
2. Add text to your DOM element and specify the number of characters to preserve after truncating.
<a href="#" id="link"></a>
$('a').textEllipses("Long Text Here", 5)
3. Decide whether or not to enable the title
attribute.
$('a').textEllipses("Long Text Here", 5,{ showTitle: true })
4. Apply custom styles to the DOM elements after the text has been truncated.
$('a').textEllipses("Long Text Here", 5,{ className: 'text-ellipsis-element' })
.text-ellipsis-element { /* your styles here */ }
5. Toggle the visibility of the truncated text on mouse hover.
$('a').textEllipses("Long Text Here", 5,{ hoverExpand: true })
This awesome jQuery plugin is developed by notetech. For more Advanced Usages, please check the demo page or visit the official website.