Ellipsis — The Art of Truncation in Web Applications
How to truncate or expand/collapse content using CSS, JavaScript, and React…?
6 min readApr 3, 2022
Sometimes you need to truncate a text and probably, make it expand by pressing a button. This usually happens when you have long texts and you only want to display a portion of them. In this article, I’m going to share with you the possible solutions based on your need.
To begin, I’m going to talk about truncating text without showing an expand button with CSS or JavaScript. Then, I’ll look into other solutions to create expandable texts.
If you don’t need a button to expand the text and you only need to limit your text to one or many lines, you can use CSS but how? Let’s see.
Truncate Text Using CSS “text-overflow”
The most common way to truncate a string is to use text-overflow.
The following image is a preview of the truncated text:
