Clamp Text With Max Lines - jQuery Line Cutter

File Size: 4.47 KB
Views Total: 2439
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Clamp Text With Max Lines - jQuery Line Cutter

Line Cutter is a tiny jQuery text truncation plugin that clamps text with max lines and adds overflow ellipsis to the end of the text block.

How to use it:

1. Download and insert the line-cutter.js library 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="line-cutter.js"></script>

2. Call the function on the long text block and specify the max number of lines. The second parameters is used to define the ellipsis character to be displayed at the end of the text block.

<p class="text-to-truncate">
  Aliquam consequat maximus imperdiet. Suspendisse porta libero faucibus vestibulum lobortis. Proin erat lectus, posuere a felis eget, lacinia eleifend lacus. Nullam placerat magna non malesuada feugiat. Mauris quis varius elit. Pellentesque blandit tellus sit amet iaculis blandit. Nam congue laoreet sem. Donec vestibulum consectetur felis, quis luctus justo volutpat in. Donec vehicula mauris augue, nec congue purus semper a. Integer convallis est ex, auctor dignissim turpis egestas sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam feugiat risus quis dignissim varius. In accumsan faucibus orci, vel ultricies nunc porta ut. Praesent elementum dolor sagittis, efficitur libero a, volutpat leo.
</p>
$(function(){
  $('.text-to-shrink').line(5, '...');
});

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