Truncate Text By Words Or Characters - jQuery truncateMe

Truncate Text By Words Or Characters - jQuery truncateMe

truncateMe is a tiny yet multi-functional text truncation plugin which helps you limit the length of your long text depending on the number of characters or words you specify.

1. Insert the minified version of the jQuery truncateMe plugin after jQuery and you're ready to go.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
       crossorigin="anonymous"></script>
<script src="truncateMe.min.js"></script>

2. Limit the length of your text to a specified number of words (Default: 50).

<p class="truncateMe">
  Your Text Here
</p>
$.truncateMe({
  elem: '.truncateMe',
  trimTo: 10
});

3. Limit the length of your text to a specified number of characters (Default: 50).

<p class="truncateMe">
  Your Text Here
</p>
$.truncateMe({
  words: false
});

4. You can also use a custom data attribute to limit the length for each text content.

<p class="truncateMe" 
   data-truncateMe="20">
   Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
$.truncateMe({
  trimEach: 'data-truncateMe',
  words: false
});

5. Customize the Ellipsis characters displayed at the end of the truncated text.

$.truncateMe({
  add: '<span class="truncateMe-dots"> [Read More]</span>'
});
.truncateMe-dots {
  /* your styles here */
}

6. Sometimes you might need to override the default seletor:

$.truncateMe({
  elem: '.your-class'
});

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

  • Publication date: 02.09.2018
  • Source