Truncate Multiline String With Ellipsis - Multiline-Overflow-Ellipsis

File Size: 15.4 KB
Views Total: 731
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Truncate Multiline String With Ellipsis - Multiline-Overflow-Ellipsis

A multiline text truncation jQuery plugin that trims your long text to a specified height and then adds an overflow ellipsis to the end.

Cross browser and fully responsive. The plugin will automatically recalculate the number of characters and trim the overflowed characters on window resize.

How to use it:

1. Before getting started, make sure you include the Multiline-Overflow-Ellipsis plugin after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="multiline-ellipsis.js"></script>

2. Attach the plugin to the text.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim risus ligula, vitae sagittis mi aliquet eget. Donec sed dui egestas, suscipit nunc vel, molestie enim. Quisque facilisis hendrerit hendrerit. Curabitur dignissim, tortor a dignissim rutrum, lacus sem gravida ex, ac gravida odio dolor quis eros. Donec porta ligula et ipsum porta, at dictum enim tempus. Nunc lobortis dolor ligula. Duis efficitur metus ac pharetra ornare. Curabitur pulvinar consequat maximus. Proin finibus ipsum at lorem aliquet, at molestie arcu consectetur. Morbi vel cursus diam, nec lacinia ex.</p>
$(function(){
  $('p').ellipsis();
});

3. Add the overflow: hidden to the text container and specify the max height of the truncated text.

p {
  overflow: hidden;
  max-height: 50px;
  line-height: 1.5;
}

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