> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Truncated Text - Web

> Truncated text shortens long strings while keeping content accessible.

> [!NOTE]
>
> For development, import `TruncatedText` from
> `@servicetitan/anvil2-ai-kit`. For design, find it in the
> [AI Kit Web Component Library file](https://www.figma.com/design/QEIsArLktLeJAaFvcpw3PO/AI-Kit-Web-Component-Library).

ai-kit-truncated-text

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text?file=src/App.tsx)

```tsx lines theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. It helps teams identify gaps, prioritize investments, and track progress over time. Maturity levels run from ad hoc experimentation to scaled deployment.";

function App() {
  return (
    <div style={{ maxWidth: "60rem" }}>
      <TruncatedText text={longText} />
    </div>
  );
}

export default App;
```

## Options

TruncatedText renders body text through `Text`, so it inherits its size scale and highlight treatment, and adds line truncation on top.

### Sizes

ai-kit-truncated-text-sizes

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-sizes?file=src/App.tsx)

```tsx lines theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. This is a long text that should be truncated. We should be able to see the full text, but it should be truncated at the end of the line.";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 16,
        maxWidth: "40rem",
      }}
    >
      <TruncatedText size="featured" text={longText} />
      <TruncatedText size="regular" text={longText} />
      <TruncatedText size="compact" text={longText} />
      <TruncatedText size="fine" text={longText} />
    </div>
  );
}

export default App;
```

`size` sets the body scale the text renders at. A smaller size fits more characters per line, so "Show more" may appear at a different point for the same copy.

### Truncate Line Length

ai-kit-truncated-text-truncate-lines

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-truncate-lines?file=src/App.tsx)

```tsx lines theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. It helps teams identify gaps, prioritize investments, and track progress over time.";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 16,
        maxWidth: "40rem",
      }}
    >
      {/* truncateLines={1} */}
      <TruncatedText truncateLines={1} text={longText} />

      {/* truncateLines={3} */}
      <TruncatedText truncateLines={3} text={longText} />

      {/* truncateLines={0} — truncation off */}
      <TruncatedText truncateLines={0} text={longText} />
    </div>
  );
}

export default App;
```

`truncateLines` sets how many lines show before "Show more" appears; it defaults to `2`. Pass `0` to turn truncation off entirely.

### Highlighted

ai-kit-truncated-text-highlighted

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-highlighted?file=src/App.tsx)

```tsx lines theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals.";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 16,
        maxWidth: "40rem",
      }}
    >
      {/* Default */}
      <TruncatedText text={longText} />

      {/* Highlighted */}
      <TruncatedText highlighted text={longText} />
    </div>
  );
}

export default App;
```

`highlighted` applies the suggested-change treatment — a flat `blue-50` background — matching a `DiffValue` revised value in a block diff.

## Behavior

The full text always stays in the DOM; only its visual clipping toggles.

### Expand and Collapse

ai-kit-truncated-text-expand-and-collapse

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-expand-and-collapse?file=src/App.tsx)

```tsx lines theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. It helps teams identify gaps, prioritize investments, and track progress over time.";

function App() {
  return (
    <div style={{ display: "flex", gap: 80, alignItems: "flex-start" }}>
      {/* Collapsed */}
      <div style={{ minWidth: 280, maxWidth: "20rem" }}>
        <TruncatedText truncateLines={2} text={longText} />
      </div>

      {/* Expanded */}
      <div style={{ minWidth: 280, maxWidth: "20rem" }}>
        <TruncatedText truncateLines={2} text={longText} />
      </div>
    </div>
  );
}

export default App;
```

"Show more" expands the full text in place and moves focus to "Show less"; collapsing returns focus to "Show more". Because the complete text remains in the DOM regardless of state, screen readers and find-in-page can always reach it.

## Usage Guidelines

### When to Use

Use the Truncated Text when:

* **Long body copy in limited space** – Body copy needs to show a set number of lines with a Show more / Show less control.
* **Full text must stay reachable** – Clipped copy still needs to be available to screen readers and find-in-page.

### When not to use

Avoid using the Truncated Text for:

* **Headlines or eyebrow labels** – Truncated Text renders body text only. Use the [Text](https://anvil.servicetitan.com/docs/components/text/ai-kit.md) instead.
* **Block-level formatted content** – Truncated Text accepts inline content only, so lists, tables, code, and quotes produce invalid markup. Use the [Markdown](https://anvil.servicetitan.com/docs/components/markdown/web.md) for formatted agent responses.

## Keyboard Interaction

Users can toggle the expanded state using standard keyboard controls.

| Key | Description |
| - | - |
| Tab | Moves focus to "Show more" or "Show less" |
| Enter / Space | Toggles the focused control's expanded state |

## Code

**Implementation**

ai-kit-truncated-text

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. It helps teams identify gaps, prioritize investments, and track progress over time. Maturity levels run from ad hoc experimentation to scaled deployment.";

function App() {
  return (
    <div style={{ maxWidth: "60rem" }}>
      <TruncatedText text={longText} />
    </div>
  );
}

export default App;
```

## Common Examples

To use the `TruncatedText`, import it from `@servicetitan/anvil2-ai-kit` and pass content through the required `text` prop. It uses body [`Text`](https://anvil.servicetitan.com/docs/components/text/react-native) styling and clamps to two lines by default.

```tsx theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <TruncatedText text="Long body content…" />;
}
```

### Line limit

Set `truncateLines` to the maximum visible lines when collapsed. Use `0` to disable truncation.

ai-kit-truncated-text-truncate-lines

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-truncate-lines?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. It helps teams identify gaps, prioritize investments, and track progress over time.";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 16,
        maxWidth: "40rem",
      }}
    >
      {/* truncateLines={1} */}
      <TruncatedText truncateLines={1} text={longText} />

      {/* truncateLines={3} */}
      <TruncatedText truncateLines={3} text={longText} />

      {/* truncateLines={0} — truncation off */}
      <TruncatedText truncateLines={0} text={longText} />
    </div>
  );
}

export default App;
```

### Expand and collapse

When content overflows, `TruncatedText` adds Show more and Show less controls. The full content remains in the DOM; clipping is visual only.

ai-kit-truncated-text-expand-and-collapse

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-expand-and-collapse?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. It helps teams identify gaps, prioritize investments, and track progress over time.";

function App() {
  return (
    <div style={{ display: "flex", gap: 80, alignItems: "flex-start" }}>
      {/* Collapsed */}
      <div style={{ minWidth: 280, maxWidth: "20rem" }}>
        <TruncatedText truncateLines={2} text={longText} />
      </div>

      {/* Expanded */}
      <div style={{ minWidth: 280, maxWidth: "20rem" }}>
        <TruncatedText truncateLines={2} text={longText} />
      </div>
    </div>
  );
}

export default App;
```

### Body size

The `size` prop accepts the body type scale: `"fine"`, `"compact"`, `"regular"` (default), and `"featured"`.

ai-kit-truncated-text-sizes

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-sizes?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals. This is a long text that should be truncated. We should be able to see the full text, but it should be truncated at the end of the line.";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 16,
        maxWidth: "40rem",
      }}
    >
      <TruncatedText size="featured" text={longText} />
      <TruncatedText size="regular" text={longText} />
      <TruncatedText size="compact" text={longText} />
      <TruncatedText size="fine" text={longText} />
    </div>
  );
}

export default App;
```

### Highlighted

Set `highlighted` to apply the suggested-change treatment.

ai-kit-truncated-text-highlighted

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-truncated-text-highlighted?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

const longText =
  "The AI Adoption Maturity Model is a framework for assessing the ability of an organization to perform and sustain specific technical practices to achieve two key, high-level goals.";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 16,
        maxWidth: "40rem",
      }}
    >
      {/* Default */}
      <TruncatedText text={longText} />

      {/* Highlighted */}
      <TruncatedText highlighted text={longText} />
    </div>
  );
}

export default App;
```

## Internationalization

`TruncatedText` uses `ai-kit.text.showMore` and `ai-kit.text.showLess` for its controls. English is the default. Mount `AiKitIntlProvider` inside `CartoTheme` to switch locale or override either string.

```tsx theme={null}
import {
  AiKitIntlProvider,
  CartoTheme,
  TruncatedText,
} from "@servicetitan/anvil2-ai-kit";

function Root() {
  return (
    <CartoTheme>
      <AiKitIntlProvider
        locale="fr-FR"
        messages={{
          "ai-kit.text.showMore": "Afficher plus",
          "ai-kit.text.showLess": "Afficher moins",
        }}
      >
        <TruncatedText text="Long content…" />
      </AiKitIntlProvider>
    </CartoTheme>
  );
}
```

## React Accessibility

* Show more and Show less expose expansion state with `aria-expanded` and associate the control with its content through `aria-controls`.
* Focus moves between Show more and Show less after expansion changes, preserving keyboard position.
* The full text remains available in the DOM while collapsed.

**TruncatedText Props**

```tsx theme={null}
<TruncatedText
  text="Long body content…"
  truncateLines={2}
  size="regular"
  highlighted={false}
/>
```

## `TruncatedText` Props

The `TruncatedText` accepts the following props. It also accepts body `Text` props except `variant`, `inline`, and `el`, which are fixed by the component.

**text** `ReactNode` *required*

Body content. Must be valid HTML phrasing content.

**className** `string`

Class merged onto the underlying `Text` element.

**highlighted** `boolean` (default: false)

Applies the suggested-change highlight treatment.

**size** `"fine" | "compact" | "regular" | "featured"` (default: regular)

Body text size.

**truncateLines** `number` (default: 2)

Maximum visible lines when collapsed. Set to `0` to disable truncation.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.