10 Best Multi-line Text Truncation Plugins In JavaScript (2021 Update)
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 Best Multi-line Text Truncation Plugins
Originally Published Oc 31 2019, updated Mar 29 2021
Table of contents:
jQuery Multi-line Text Truncation Plugins:
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.
Multiline Truncation With Ellipsis And Toggle Links - jQuery multiTextToggleCollapse
Yet another multi-line text truncation plugin that truncates & collapse long text block by lines and allows the visitor to toggle the truncated text with Read More & Read Less links.
Trim Text To Specified Number Of Lines - Vertical Truncator
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.
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.
Vanilla JS Multi-line Text Truncation Plugins:
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.
Long Content Truncation With Show More/Less Links – show-more
A feature-rich JavaScript library that truncates long contents and replaces the overflowing content with show more and show less links.
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.
Truncate Long Text To A specified Number Of Lines – thellipsis
A tiny vanilla JavaScript multi-line text truncation plugin that makes it possible to truncate your long text to a specified number of lines.
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.