rc-text-ellipsis

React TextEllipsis Component - A powerful and flexible text truncation component with expand/collapse functionality.

[![NPM version][npm-image]][npm-url]
[![build status][ci-image]][ci-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-text-ellipsis.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-text-ellipsis
[ci-image]: https://github.com/wulala0102/rc-text-ellipsis/workflows/CI/badge.svg
[ci-url]: https://github.com/wulala0102/rc-text-ellipsis/actions
[coveralls-image]: https://img.shields.io/coveralls/wulala0102/rc-text-ellipsis.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/wulala0102/rc-text-ellipsis?branch=main
[download-image]: https://img.shields.io/npm/dm/rc-text-ellipsis.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-text-ellipsis

Features

- 🎯 Multi-line text truncation with precise control
- 📍 Three ellipsis positions: start, middle, end
- 🔄 Expand/collapse functionality
- 🎨 Customizable action buttons
- 📱 Responsive - auto-recalculates on window resize
- 🎛️ Imperative API via ref
- 💪 TypeScript support
- ⚡ Efficient binary search algorithm

Demo

🚀 Live Demo - See all features in action!

Installation

``bash
npm install rc-text-ellipsis --save
`

or

`bash
yarn add rc-text-ellipsis
`

Usage

$3

`tsx
import React from 'react';
import TextEllipsis from 'rc-text-ellipsis';
import 'rc-text-ellipsis/assets/index.css';

function App() {
return (
rows={3}
content="This is a very long text that needs to be truncated..."
expandText="Expand"
collapseText="Collapse"
/>
);
}
`

$3

`tsx
rows={2}
content="Your long text here..."
action={(expanded) => (

{expanded ? '[Fold]' : '[Unfold]'}

)}
/>
`

$3

`tsx
rows={2}
content="Your long text here..."
suffix={(expanded, isOverflow) => (

{isOverflow ? (expanded ? '[Collapse]' : '[Expand]') : '[Complete]'}

)}
/>
`

$3

`tsx
import React, { useRef } from 'react';
import TextEllipsis, { TextEllipsisRef } from 'rc-text-ellipsis';

function App() {
const textEllipsisRef = useRef(null);

const handleExpand = () => {
textEllipsisRef.current?.toggle(true);
};

return (
<>
ref={textEllipsisRef}
rows={2}
content="Your long text here..."
expandText="Expand"
collapseText="Collapse"
/>
Expand from outside

);
}
`

$3

`tsx
// Ellipsis at the end (default)
position="end"
rows={2}
content="Your text..."
/>

// Ellipsis at the start
position="start"
rows={2}
content="Your text..."
/>

// Ellipsis in the middle
position="middle"
rows={2}
content="Your text..."
/>
`

Suffix vs Action

The component supports two ways to display additional content:

$3

- Only visible when text is truncated
- Disappears when text doesn't overflow
- Used for expand/collapse functionality

$3

- Always visible, regardless of text overflow
- Receives two parameters:
- expanded: Current expand/collapse state
- isOverflow: Whether the text is truncated
- Perfect for status indicators, badges, or persistent actions

Important: action and suffix are mutually exclusive. If both are provided, suffix takes priority.

`tsx
// Suffix shows different states
rows={2}
content={longText}
suffix={(expanded, isOverflow) => (

{isOverflow
? (expanded ? '▲ Show Less' : '▼ Show More')
: '✓ Complete'
}

)}
/>
`

API

$3

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | - | Additional CSS class for the root element |
| style | React.CSSProperties | - | Inline styles for the root element |
| rows | number | 1 | Number of lines to display before truncating |
| dots | string | '...' | The ellipsis text to show when truncated |
| content | string | '' | The text content to display |
| expandText | string | '' | Text for the expand action button |
| collapseText | string | '' | Text for the collapse action button |
| position | 'start' \| 'middle' \| 'end' | 'end' | Position of the ellipsis |
| onClickAction | (e: React.MouseEvent) => void | - | Callback when action button is clicked |
| action | (expanded: boolean) => React.ReactNode | - | Custom render function for action button |
| suffix | (expanded: boolean, isOverflow: boolean) => React.ReactNode | - | Custom render function for suffix (always visible). Mutually exclusive with action - if both are provided, suffix takes priority |

$3

| Method | Type | Description |
| --- | --- | --- |
| toggle | (expanded?: boolean) => void | Programmatically toggle expand/collapse state |

$3

`tsx
import TextEllipsis, {
TextEllipsisProps,
TextEllipsisRef
} from 'rc-text-ellipsis';
`




Development

`bash


Install dependencies

npm install

Start development server

npm start

Visit http://localhost:8000/examples/ to see examples

`

Build

`bash


Build the component

npm run build

Run linter

npm run lint
`

Test

`bash


Run tests

npm test

Run tests in Chrome

npm run chrome-test

Generate coverage report

npm run coverage
``

Browser Support

Modern browsers and IE11+

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

License

rc-text-ellipsis is released under the MIT license.