Trim Text To Specified Number Of Lines - Vertical Truncator
File Size: | 4.77 KB |
---|---|
Views Total: | 2784 |
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.