More Premium Hugo Themes Premium React Themes

React Truncate

React component for truncating multi-line spans and adding an ellipsis.

React Truncate

React component for truncating multi-line spans and adding an ellipsis.

Author Avatar Theme by pablosichert
Github Stars Github Stars: 590
Last Commit Last Commit: Dec 1, 2020 -
First Commit Created: Aug 8, 2025 -
default image

Overview:

React-Truncate is a powerful and flexible library designed to manage the truncation of text in React applications. Whether you’re dealing with long paragraphs or simply need to enhance user experience by limiting excessive text, this component provides you with the tools to do so effectively. With its ability to preserve newlines and allow for custom ellipsis, developers can maintain the integrity of their content while controlling its display.

This library is particularly handy for applications where readability is key, allowing users to click on a “Read more” link to expand the content. It also addresses common challenges, such as resizing and responsive behavior, making it a valuable addition to any React project.

Features:

  • Lines Control: Specify how many lines of text are preserved before truncation, with options for both integers and boolean values.
  • Custom Ellipsis: Tailor the ellipsis with a string or React node, allowing for greater flexibility in how truncated text appears.
  • Child Components: Support for various text elements as children, enabling rich content to be truncated seamlessly.
  • Whitespace Trimming: Option to remove whitespace before the ellipsis, providing a cleaner visual presentation.
  • Dynamic Width Calculation: Adjusts truncation logic based on a specified width, improving accuracy in text display.
  • Truncate Callback: Implement a function that is invoked whenever the text is truncated, allowing for responsive design adjustments in real-time.
  • Responsive Behavior: Addresses known issues with resizing and viewport compatibility, ensuring a smoother experience on mobile devices.
  • Development Tools: Includes a streamlined process for testing dependencies and compiling code, aiding in the overall development workflow.