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

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.

npm i react-lines-ellipsis

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

import React, { useState } from 'react';
import LinesEllipsis from 'react-lines-ellipsis';

const longText = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;

function App() {
  const [truncated, setTruncated] = useState(true);

  return (
    <div class="App">
      <h4>Truncate text in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>

      {truncated ? <linesellipsis text={longText} maxline="3" ellipsis="{<">... <button onclick="{()" ==""> setTruncated(!truncated)}>Read More</button>}
        basedOn='words'
      /> : <div>{longText} <button onclick="{()" ==""> setTruncated(!truncated)}>Less</button></div>}
    </linesellipsis></div>
  );
}

export default App;

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

body {
  margin: 20px;
  font-size: 18px;
  line-height: 25px;
  font-family: Calibri, sans-serif;
}

.App {
  width: 500px;
}

button {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  color: dodgerblue;
}

button:hover {
  color: darkblue;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <react class="strictmode">
    <app>
  </app></react>
);

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