10 Best Multi-line Text Truncation Plugins In JavaScript (2023 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.
Good truncation is an art form. The modern web has made truncation increasingly necessary. Mobile users can’t read a string of text that goes off into infinity and beyond. There are many plugins out there to help you truncate your text on the front-end, but which one is best?
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 07 2023
Table of contents:
jQuery Multi-line Text Truncation Plugins:
Extremely Lightweight jQuery Multiline Text Truncating Plugin - Succinct
A super lightweight (~0.6kb minified) jQuery plugin that allows you to shorten your text to a specified size, and then adds an ellipsis (or custom characters) to the end.
Truncate Text From The Middle Or End - jQuery Truncate.js
A lightweight jQuery text truncation plugin that truncates long text from the beginning, middle, or end to the specified width or to fit the width of its parent element. Supports both single line or multi line text.
Animated Text Truncate & Content Toggle Plugin - jQuery Collapser
A flexible, responsive, multifunctional jQuery Text Truncate & Content Toggle plugin that truncates long text by words, characters or lines and shows/hides truncated text with fade or slide animations.
Lightweight jQuery Read More Link Plugin - Readmore.js
A super simple and lightweight jQuery plugin that automatically generates a Read More link for users to click and read the rest of the content.
Animated Read More Plugin For Long Content - jQuery readMore.js
A small jQuery plugin to create a Read More button to expand a long block of text content shrunk by height. The overflowing text fades out at the bottom and has a custom "Read More" link.
Vanilla JS Multi-line Text Truncation Plugins:
Truncating Text Across DOM Nodes – shear.js
A powerful and standalone text truncation library that has the ability to truncate long block text by lines across DOM nodes. Based on the Selection Web API.
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.
Multiline Text Truncator In Vanilla JavaScript – Cuttr.js
A vanilla JavaScript text truncation library to truncate text to any number of characters, words, or even sentences.
Truncate Text To Any Length – truncate-element.js
A lightweight web component that allows you to easily truncate your content to any number of characters. It automatically adds a read more link at the end of the text so that users can reveal the remaining text with a single click.
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.
Conclusion:
If you have any experiences of your own with these best multi-line text truncation plugins in JavaScript, we would love to hear from you. We will review and add any that we see fit, and update our rankings as well. Please comment below to discuss.
Looking for Want more jQuery plugins or JavaScript libraries for truncating text on the web & mobile? See jQuery Text Truncation and JavaScript Text Truncation sections for more details.
