This time I will share jQuery Plugin and tutorial about Truncate Text With Ellipsis Using jQuery – Text-Ellipses, hope it will help you in programming stack.
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.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
5 |
<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.
1 |
<a href="#" id="link"></a> |
1 |
$('a').textEllipses("Long Text Here", 5) |
3. Decide whether or not to enable the title attribute.
1 |
$('a').textEllipses("Long Text Here", 5,{ |
4. Apply custom styles to the DOM elements after the text has been truncated.
1 |
$('a').textEllipses("Long Text Here", 5,{ |
2 |
className: 'text-ellipsis-element' |
1 |
.text-ellipsis-element { |
5. Toggle the visibility of the truncated text on mouse hover.
1 |
$('a').textEllipses("Long Text Here", 5,{ |
This awesome jQuery plugin is developed by notetech. For more Advanced Usages, please check the demo page or visit the official website.
