10 Best Multi-line Text Truncation Plugins In JavaScript
CSS natively provides a great property 'text-overflow' that allows you to truncate single-line text by hiding the overflowing strings and add an ellipsis to the end of the truncated text.
However, to this day, CSS does not have a straightforward property to deal with multi-line text truncation.
For those who'd like to have a simple solution to truncate multi-line text for long text blocks (e.g. blog excerpts, product description, etc), check out this list of 10 best jQuery and Vanilla JavaScript plugin to truncate multi-line text with custom ellipsis and Read More/Read Less links. Have fun.
The Multi-line Text Truncation Plugins
Table of contents:
jQuery Multi-line Text Truncation Plugins:
Smart & Cross-Browser Long Text Truncating Plugin For jQuery - dotdotdot
dotdotdot is a smart and cross-browser jQuery plugin that truncates multiple line content to fit within your container and adds an ellipsis at the end of the text.
Truncating Text By Number Of Lines - jQuery ellipsis
ellipsis.js is a responsive multi-line text truncation plugin that truncates your long text by a specific number of lines and adds "..." to the end of the word.
Show/Hide Long Text Based On Max Length - jQuery show-hide-text
show-hide-text is a small jQuery based 'Truncate Text By The Number Of Characters' plugin which enables the users to show and hide long text with Read More and Read Less links.
jQuery Plugin For Responsive Multi Line Text Truncating - fewlines
fewlines is a jQuery plugin that clips the long text in a container to a specified number of lines with an ellipsis or custom toggle links.
Simple jQuery Text Overflow Ellipsis Plugin
text-overflow-ellipsis.js is a jQuery plugin for adding in client-side multi-line text overflow based on line number.
Vanilla JS Multi-line Text Truncation Plugins:
Read More / Read Less Functionality In Pure JavaScript – ReadMore.js
A really lightweight (~2kb minified) and cross-browser JavaScript library that truncates text by words and shows/hides text blocks with Read More and Read Less links.
Responsive Multi-line Text Truncating In Pure JavaScript – Ellipsis.js
Ellipsis.js is a pure JavaScript library for responsive text truncation which enables you to truncate multi-line text within a specified DOM element(s) with ellipsis.
Truncating Multi-line Text By Height – Shave.js
Shave.js is a lightweight, flexible JavaScript library used for truncating multiple lines of text to a height you specify. With or without custom ellipsis character.
Truncating Overflowing Text By Lines – ellipsed.js
ellipsed.js is a very small(2kb) JavaScript library that truncates your long text to a specific number of lines.
Responsive Accessible Text Cropping Library – cropCopyRestore.js
cropCopyRestore.js is a standalone JavaScript library which allows to truncate long text by lines and provides an accessible way to toggle the truncated content with a smooth sliding effect.
Conclusion:
Want more jQuery plugins or JavaScript libraries to apply Text Truncation effect on the web & mobile? Check out the jQuery Text Truncation and JavaScript Text Truncation sections.