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
• Vanilla JS Multi-line Text Truncation Plugins

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.