@re-dev/react-truncate
[English](https://truncate.js.org) | [简体中文](https://truncate.js.org/zh/)
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):
```bash
npm install @re-dev/react-truncate
```
## Documentation
- [Truncate](https://truncate.js.org/reference/truncate/)
A basic component for cropping text. Usually there is no need to use it directly. `` and `` provided by this package are both extended based on this component.
- [ShowMore](https://truncate.js.org/reference/show-more/)
A "Show More" component, when the content exceeds the set number of display lines, an expand button will appear to view more content.
- [MiddleTruncate](https://truncate.js.org/reference/middle-truncate/)
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](https://github.com/remanufacturing/react-truncate/blob/main/CHANGELOG.md) for details.
## License
MIT License © 2023-PRESENT [chengpeiquan](https://github.com/chengpeiquan)