10 Best Multi-line Text Truncation Plugins In JavaScript

by jQueryScript,

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.

Smart & Cross-Browser Long Text Truncating Plugin For jQuery - dotdotdot

[Demo] [Download]


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.

Truncating Text By Number Of Lines - jQuery ellipsis

[Demo] [Download]


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.

Show/Hide Long Text Based On Max Length - jQuery show-hide-text

[Demo] [Download]


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.

jQuery Plugin For Responsive Multi Line Text Truncating - fewlines

[Demo] [Download]


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.

Simple jQuery Text Overflow Ellipsis Plugin

[Demo] [Download]


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.

Read More / Read Less Functionality In Pure JavaScript – ReadMore.js

[Demo] [Download]


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.

Responsive Multi-line Text Truncating In Pure JavaScript – Ellipsis.js

[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.

Truncating Multi-line Text By Height – Shave.js

[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.

Truncating Overflowing Text By Lines – ellipsed.js

[Demo] [Download]


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.

Responsive Accessible Text Cropping Library – cropCopyRestore.js

[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.