10 Best Multi-line Text Truncation Plugins In JavaScript (2024 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 Feb 22 2024
Table of contents:
jQuery Multi-line Text Truncation Plugins:
Expand & Collapse Text Using Read More/Less links - Expander
A simple, customizable jQuery text truncation plugin that allows you to quickly and easily add expand & collapse functionality to any content.
Truncate Text Based On Width - jQuery ellipsisWidth
A tiny, fast, and smart ellipsis truncation jQuery plugin designed to truncate a string when it overflows a rigidly-specified width.
Limit Text Length And Show Read More Link - LineShowMoreLess
Just another read more & read less jQuery plugin that collapses text more than specified lines and creates a Show More link to toggle the full content.
Expand And Collapse Long Content With The moreless jQuery Plugin
A lightweight (less than 1kb) jQuery plugin that makes your long and wieldy blocks of text more accessible and readable for visitors.
Show/Hide Long Text Based On Max Length - jQuery show-hide-text
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.
Vanilla JS Multi-line Text Truncation Plugins:
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.
Convert Text Block Into Horizontal Scroller – Text Truncate Scroll
The Text Truncate Scroll library trims your long text into a single-line paragraph and shows the full content on hover with a scroll effect. Written in TypeScript and works on any devices.
Truncate Text If Exceed Max Character Limit – charCount
A tiny and straightforward text truncation library that automatically trims text based on a specified character limit and displays a Read More button to reveal the hidden content when desired.
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.
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.
