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