📦 react-multiline-ellipsis-text

A lightweight and reusable React component for applying multi-line ellipsis to text — ideal for truncating long descriptions, titles, or notes with a clean UI.

✨ Default is 2-line truncation, but customizable to any number of lines.

🔧 Installation

npm install react-multiline-ellipsis-text

or with yarn:

yarn add react-multiline-ellipsis-text

🚀 Usage

import React from 'react';
import { EllipsisText } from 'react-multiline-ellipsis-text';

function App() {
  return (
    <div style={{ width: 300 }}>
      <EllipsisText
        text="This is a long piece of text that will be truncated after two lines with an ellipsis to indicate more content."
        lines={2}
      />
    </div>
  );
}

🧩 Props
Prop	Type	Default	Description
text	string	—	The text content to display.
lines	number	2	The number of lines to show before truncating.
style	object	{}	Optional styles to override the default component.
className	string	""	Optional class name for additional styling.


💡 Why use this?
✅ Handles long text elegantly in cards, lists, etc.

🪶 Tiny and dependency-free (except react)

⚙️ Fully customizable via style or className

💙 Works great in responsive layouts

📄 License
MIT License © Raj Lad

lad-react-multiline-ellipsis

Package Exports

Readme

📦 react-multiline-ellipsis-text

🔧 Installation