Trim Text To Specified Number Of Lines - Vertical Truncator

Trim Text To Specified Number Of Lines - Vertical Truncator
File Size: 4.77 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Vertical Text Truncator jQuery plugin allows you to trim long text to a specific number of rows and replace the truncated part with a "... Read More" link.

Cross browser, easy to use and fully responsive.

How to use it:

1. Load the script jquery.vertical-truncator.js after the latest jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>        
<script src="jquery.vertical-truncator.js"></script>

2. Initialize the Vertical Text Truncator on document ready.

jQuery(document).ready(function() {
  vertically_truncate();
});

3. Add the data-vertical-truncator attribute to the text to be truncated and define the number of lines to preserve as follows:

<h1 data-vertical-truncator="3">
  The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%),
</h1>

<h1 data-vertical-truncator="2">
  The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%),
</h1>

<h1 data-vertical-truncator="1">
  The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%),
</h1>

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