rc-text-ellipsis

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

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

npm install rc-text-ellipsis --save

or

yarn add rc-text-ellipsis

Usage

Basic Example

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

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

With Custom Action Button

<TextEllipsis
  rows={2}
  content="Your long text here..."
  action={(expanded) => (
    <span style={{ color: 'red', fontWeight: 'bold' }}>
      {expanded ? '[Fold]' : '[Unfold]'}
    </span>
  )}
/>

With Suffix (Always Visible)

<TextEllipsis
  rows={2}
  content="Your long text here..."
  suffix={(expanded, isOverflow) => (
    <span style={{ color: 'blue', marginLeft: '4px' }}>
      {isOverflow ? (expanded ? '[Collapse]' : '[Expand]') : '[Complete]'}
    </span>
  )}
/>

Using Ref for External Control

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

function App() {
  const textEllipsisRef = useRef<TextEllipsisRef>(null);

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

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

Different Ellipsis Positions

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

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

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

Suffix vs Action

The component supports two ways to display additional content:

Action Button

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

Suffix

• 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.

// Suffix shows different states
<TextEllipsis
  rows={2}
  content={longText}
  suffix={(expanded, isOverflow) => (
    <span style={{ color: isOverflow ? 'orange' : 'green' }}>
      {isOverflow
        ? (expanded ? '▲ Show Less' : '▼ Show More')
        : '✓ Complete'
      }
    </span>
  )}
/>

API

Props

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

Ref Methods

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

TypeScript Types

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

Development

# Install dependencies
npm install

# Start development server
npm start

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

Build

# Build the component
npm run build

# Run linter
npm run lint

Test

# 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.