Truncate Text From The Middle Or End - jQuery Truncate.js

Truncate.js is a lightweight jQuery text truncation plugin that truncates long text from the beginning, middle, or end to the specified width or to fit the width of its parent element. Supports both single line or multi line text.

See Also:

• 10 Best Multi-line Text Truncation Plugins In JavaScript

How to use it:

1. To get started, include the jquery.truncate.min.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.truncate.min.js"></script>

2. Initialize the plugin on the text wrapper. 

<p class="demo">
  ...
</p>

$('.demo').truncate({
  // options here
});

3. By default the plugin automatically truncate the text from the end to fit the width of its parent container. You can override the width option to truncate the text to a specific width.

$('.demo').truncate({
  width: '200px',
});

4. Specify the position from which the text should be truncated. Default: 'right'.

$('.demo').truncate({
  side: 'middle', // or 'left'.
});

5. Specify what to replace the hidden text with. Default: '…'.

$('.demo').truncate({
  token: 'More...',
});

6. Determine whether to apply the plugin to multiline text. Default: false.

$('.demo').truncate({
  multiline: true,
});

7. Apply a CSS class to the text. Default: false.

$('.demo').truncate({
  addclass: 'highlight',
});

8. Determine whether to add a title attribute to the text. Default: false.

$('.demo').truncate({
  addtitle: true,
});

9. Cache the styles for multiple text with the same styles. Default: false.

$('.demo').truncate({
  assumeSameStyle: true,
});

---

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