@re-dev/react-truncate

Provides Truncate, MiddleTruncate and ShowMore React components for truncating multi-line spans and adding an ellipsis.

When you need the collapsed state to keep rendered inline markup such as links, classes, or inline styles, enable the opt-in preserveMarkup prop on Truncate or ShowMore. The default path remains optimized for plain-text truncation.

Installation

With npm(or yarn, or pnpm):

npm install @re-dev/react-truncate

Documentation

Truncate

A basic component for cropping text. Usually there is no need to use it directly. <ShowMore /> and <MiddleTruncate /> provided by this package are both extended based on this component.

ShowMore

A "Show More" component, when the content exceeds the set number of display lines, an expand button will appear to view more content.

MiddleTruncate

A "middle ellipsis" component, when the content exceeds the limit of the parent's width, an ellipsis symbol will appear (similar to CSS's text-overflow: ellipsis effect), but its omission position can be specified in the middle of the text instead of the end.

Release Notes

Please refer to CHANGELOG for details.

JSPM