# LongText

Truncated text with a full-text disclosure only when the content overflows.

Page: https://sui.draco.dev/docs/components/long-text

### Example: long-text-demo

```tsx
import { Input } from "@workspace/ui/components/input";
import { LongText } from "@workspace/ui/components/long-text";
import { useState } from "react";
import type { ExampleProps } from "../types";

export default function LongTextDemo({ locale }: ExampleProps) {
  const zh = locale === "zh-CN";
  const [text, setText] = useState(
    "production-api-gateway.asia-east-1.example.com",
  );
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Input
        aria-label={zh ? "编辑文本" : "Edit text"}
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
      <div className="flex items-center justify-between gap-4 rounded-2xl border p-4">
        <span className="text-muted-foreground text-sm">
          {zh ? "域名" : "Domain"}
        </span>
        <LongText
          className="w-44"
          label={zh ? "显示完整域名" : "Show full domain"}
        >
          {text}
        </LongText>
      </div>
      <p className="text-muted-foreground text-sm">
        {zh
          ? "悬停或键盘聚焦查看全文，触屏点击展开。短文本不会启用浮层。"
          : "Hover or focus to see the full text; tap on touch devices. Short text needs no overlay."}
      </p>
    </div>
  );
}
```

## Installation

```bash
bunx --bun shadcn@latest add @sui/long-text
```

Install with the shadcn CLI or use the shared `@workspace/ui` package. Follow the [installation guide](/docs/installation) to configure the registry, load styles, and choose import aliases.

```tsx
import { LongText } from "@workspace/ui/components/long-text"
```

## Usage

```tsx
<LongText className="max-w-48" label="Show full resource name">
  production-api-gateway.asia-east-1.example.com
</LongText>
```

Give the component a constrained width. Overflowing text becomes a keyboard-focusable trigger. Pointer devices show SUI Tooltip on hover or focus; coarse pointers show SUI Popover on tap. Short text remains plain text. Measurements update when content, layout, fonts, or pointer capabilities change.

## Table cells

Use a fixed table layout or constrain the cell width so ellipsis has a boundary.

### Example: long-text-table

```tsx
import { LongText } from "@workspace/ui/components/long-text";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@workspace/ui/components/table";
import type { ExampleProps } from "../types";

export default function LongTextTable({ locale }: ExampleProps) {
  const zh = locale === "zh-CN";
  return (
    <Table className="table-fixed">
      <TableHeader>
        <TableRow>
          <TableHead className="w-20">ID</TableHead>
          <TableHead>{zh ? "名称" : "Name"}</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {["sui", "production-api-gateway.asia-east-1.example.com"].map(
          (name, index) => (
            <TableRow key={name}>
              <TableCell>{index + 1}</TableCell>
              <TableCell>
                <LongText label={zh ? "显示完整名称" : "Show full name"}>
                  {name}
                </LongText>
              </TableCell>
            </TableRow>
          ),
        )}
      </TableBody>
    </Table>
  );
}
```

## API

| Prop | Description |
| --- | --- |
| `children` | Displayed content, repeated in the disclosure. Use text or noninteractive inline content. |
| `className` | Width and layout classes on the outer container. |
| `contentClassName` | Layout classes on the full-text surface. |
| `label` | Optional accessible trigger name. Defaults to the displayed text. |

The pattern is inspired by [shadcn-admin LongText](https://github.com/satnaing/shadcn-admin/blob/main/src/components/long-text.tsx), with SUI Base UI composition and resize-aware overflow detection.