Skip to main content

Text truncate

TextTruncate clamps long text to a number of lines and adds an expand/collapse toggle only when the content actually overflows.

Example

<TextTruncate
  className="border rounded p-3"
  rows={2}
>
  <p>
    Idea React is a TypeScript-first collection of advanced React components powered by MobX.
    From dialogs and notifications to live code, editors, and timelines, it brings the building
    blocks together so you can focus on your application instead of plumbing. This paragraph is
    long on purpose so the clamp and the expand toggle are visible in the example.
  </p>
</TextTruncate>

Usage

<TextTruncate rows={3} expandText="Show more" collapseText="Show less">
  {longBiography}
</TextTruncate>

rows sets the visible line count (default 3). The toggle reports its state through aria-expanded, and overflow is re-checked on window resize and content changes.