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
Truncate text in React
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.
1 | npm i react-lines-ellipsis |
You will find the version of the following packages in React application.
3. Implementation
Refer to the following files for implementation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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 className="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>} </div> ); } export default App; |
Use the LinesEllipsis component in your React component and pass the following props:
text: the text to be truncatedmaxLine: the maximum number of lines to displayellipsis: the text to be displayed at the end of the truncated texttrimRight: a boolean value indicating whether to trim the right side of the text or not
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 | 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.StrictMode> <App /> </React.StrictMode> ); |
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..!!
