Responsive Text Truncating Plugin For jQuery - TruncateJS

TruncateJS is a tiny jQuery plugin used for truncating multi-line text with respect to its container's height that automatically refreshes on window resize for responsive web layout.

How to use it:

1. Add references to jQuery library and the jQuery TruncateJS plugin.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="truncate.js"></script>

2. Wrap your text into a container with a fixed height.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non turpis sapien. Phasellus luctus vel lacus at ultrices. Phasellus eget nunc ut sem rhoncus mollis. Aliquam mollis eget massa ac posuere. Suspendisse blandit lacus quis mauris sollicitudin, id sagittis tellus pellentesque. Pellentesque facilisis feugiat tristique. Sed fermentum accumsan mollis. Quisque non libero auctor, ultrices nibh eget, lobortis purus. Cras iaculis ultrices dolor, nec laoreet nunc scelerisque a. Proin id lorem dictum, lobortis nibh eget, ullamcorper ex. Curabitur eu sapien velit. Quisque posuere ligula rhoncus finibus tempus.</p>

p { height:144px; line-height:24px;}

3. Call the function with default options.

$('p').truncate();

4. Break words between any two letters.

$('p').truncate({
  breakWords: true
});

5. Break words between any two letters.

$('p').truncate({
  breakWords: true
});

6. Specify the character to represent truncated text

$('p').truncate({
  suffix: 'More ...',
});

7. Specify the maximum number of words.

$('p').truncate({
  maximumWordLenght: 255
});

8. Config the 'Auto Refresh' behavior.

$('p').truncate({
  refreshOnWindowResize: true,
  refreshResizeDelay: 50
});

Change log:

2016-12-01

• JS update

---

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