Truncate Text With Ellipsis Using jQuery - Text-Ellipses

Truncate Text With Ellipsis Using jQuery - Text-Ellipses

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.

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.

  • Publication date: 11.05.2018
  • Source