# Ellipsis

> Ellipsis

- Skill: `reaviz/ellipsis` (Agent Skill)
- Install (CLI): `npx skillmds@latest add reaviz/ellipsis`
- Raw SKILL.md: https://api.skillmd.com/api/skills/reaviz/ellipsis/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: reaviz (https://skillmd.com/u/reaviz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/reaviz/ellipsis

---

# Ellipsis

Truncates text with expandable "..." toggle. Supports character limit and line-based truncation with responsive re-measurement.

## Import

```tsx
import { Ellipsis } from 'reablocks';
```

## Ellipsis Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Text to truncate |
| `limit` | `number` | `256` | Character limit for truncation |
| `lines` | `number` | — | Number of lines to show (overrides character limit) |
| `expandable` | `boolean` | `true` | Allow expanding truncated text |
| `moreText` | `string` | `'...'` | Text for the expand button |
| `lessText` | `string` | `'Show less'` | Text for the collapse button |
| `removeLinebreaks` | `boolean` | `true` | Replace line breaks with spaces |
| `title` | `string \| false` | — | Hover title (defaults to full value, `false` to disable) |
| `className` | `string` | — | Additional CSS classes |
| `theme` | `EllipsisTheme` | — | Per-instance theme override |

## Basic Usage

```tsx
<Ellipsis value="A very long text string that exceeds the character limit..." />
```

## Non-Expandable

```tsx
<Ellipsis expandable={false} value={longText} />
{/* Shows truncated text with "..." but no expand button */}
```

## Line-Based Truncation

When `lines` is set, truncation is based on visible lines rather than character count. Responsive — re-measures on window resize.

```tsx
<div style={{ width: 250 }}>
  <Ellipsis lines={3} value={longText} />
</div>
```

## EllipsisTheme Interface

```typescript
interface EllipsisTheme {
  dots: string;  // Expand/collapse button styles (cursor-pointer, opacity)
}
```