Truncate text in React using react-lines-ellipsis

In this article, we will show you how to truncate text in React using react-lines-ellipsis. react-lines-ellipsis is an npm package that provides a React component for truncating text and adding an ellipsis at the end of the truncated text. It is a lightweight and customizable solution for handling text truncation in React.

The component allows you to set the maximum number of lines you want to display, and will automatically add an ellipsis if the text exceeds the specified number of lines. It also supports customizing the ellipsis character and provides additional options for handling word breakage and trimming.

One of the advantages of using react-lines-ellipsis is that it uses pure CSS to handle the truncation, which makes it efficient and performant. Additionally, it is easy to integrate with existing React projects, as it follows standard React component patterns and can be easily customized using props.

Overall, react-lines-ellipsis is a useful tool for handling text truncation in React applications, and can help improve the user experience by providing a cleaner and more readable layout for text-heavy content.

Demo Application

Output - Truncate text in React using react-lines-ellipsis - Clue Mediator
Output – Truncate text in React using react-lines-ellipsis – Clue Mediator

Truncate text in React

  1. Project structure
  2. Package dependencies
  3. Implementation
  4. Output

1. Project structure

  • react-truncate-text-example
    • node_modules
    • public
      • index.html
    • src
      • App.js
      • index.css
      • index.js
    • package-lock.json
    • package.json
    • README.md

2. Package dependencies

Run the following command to install react-lines-ellipsis npm package.

You will find the version of the following packages in React application.

react
^18.2.0
react-lines-ellipsis
^0.15.3

3. Implementation

Refer to the following files for implementation.

App.js

Use the LinesEllipsis component in your React component and pass the following props:

  • text: the text to be truncated
  • maxLine: the maximum number of lines to display
  • ellipsis: the text to be displayed at the end of the truncated text
  • trimRight: a boolean value indicating whether to trim the right side of the text or not
index.css
index.js

4. Output

Run your application and check the output in the browser.
Live Demo

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *