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