> ## 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.

# Overflow Text - Web

> OverflowText provides row-based text truncation with optional expand/collapse functionality for text content.

> [!NOTE]
>
> For development, import `OverflowText` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3).

![](https://mintcdn.com/servicetitan/mUSuIbu4js-UtGZd/images/docs/web/components/overflow-text/overview-image.png?fit=max\&auto=format\&n=mUSuIbu4js-UtGZd\&q=85\&s=e484077a32ebb36738e4b67674a725d4)

## Anatomy

The OverflowText consists of two primary elements that work together to manage text content with row-based truncation.

![Anatomy of the OverflowText component](https://mintcdn.com/servicetitan/NkSrIaHzJjwUU4IF/images/docs/web/components/overflow-text/design/overflow-text-anatomy.png?fit=max\&auto=format\&n=NkSrIaHzJjwUU4IF\&q=85\&s=c657a0531bb76e9356952adffb424007)

1. **Content area** - The text container that holds the content with row-based truncation
2. **Expand button** (Optional) - A button that appears when expandable is enabled and content exceeds the specified row limit

## Options

The OverflowText supports the following configurations to accommodate various text truncation scenarios.

### Rows

overflowtext-rows-3

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

```tsx lines theme={null}
import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ maxWidth: "400px" }}>
      <OverflowText rows={3}>
        <Text>
          <strong>Truncation</strong> - Do duis consequat esse consequat eu
          consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
          veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
          elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
          consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
          fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
          elit sint eu elit fugiat magna voluptate commodo fugiat.
        </Text>
      </OverflowText>
    </Flex>
  );
}

export default App;
```

OverflowText limits text content to a specified number of rows, defaulting to one row. Set the rows prop to control how many lines of text are visible before truncation. Use "unlimited" to display all content without row restrictions. When expandable is enabled, content exceeding the row limit displays an expand button.

### Expandable

overflowtext-expandable

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

```tsx lines theme={null}
import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ maxWidth: "400px" }}>
      <OverflowText rows={3} expandable>
        <Text>
          <strong>Truncation</strong> - Do duis consequat esse consequat eu
          consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
          veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
          elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
          consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
          fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
          elit sint eu elit fugiat magna voluptate commodo fugiat.
        </Text>
      </OverflowText>
    </Flex>
  );
}

export default App;
```

When expandable is enabled, OverflowText displays a "Show more..." button when content exceeds the specified row limit. Users can expand to view full content or collapse to return to the truncated view. Custom expand and collapse text can be configured, along with optional callbacks for expand and collapse events.

## Usage Guidelines

| Standard | Requirement |
| - | - |
| DoTruncating text to a row limit | Truncate text content to an exact number of rows |
| DoExpandable text sections | Provide expandable text sections with row-based limits |
| DoText previews that expand | Display text previews that expand to show full content |
| Don'tNon-text content | Use Overflow for complex content with multiple elements |
| Don'tContent requiring scrolling | Use Overflow when you need scrollable areas instead of expandable sections |

### Alternatives

Simple single-line text truncation may not require the full OverflowText component.

#### OverflowText vs Overflow

OverflowText provides row-based truncation specifically for text content, while Overflow provides scrollable areas for any content type with height or width-based constraints. Use OverflowText when you need precise control over text line limits and row-based expansion. Use Overflow for complex content, horizontal scrolling, or when you need shadow indicators.

## Content

OverflowText works best with text content wrapped in Text components. The component automatically handles line breaks and text wrapping based on the specified row limit. Ensure that important information appears in the first few rows when expandable is enabled, as users may not expand to view all content.

## Keyboard Interaction

Users can navigate the OverflowText using standard keyboard controls.

| Key | Description |
| - | - |
| Tab | Moves focus to the next focusable element |
| Space or Enter | Activates the expand/collapse button when expandable is enabled |

## Code

**Implementation**

## Live Component Playground

overflowtext-playground

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

```tsx lines expandable theme={null}
import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ maxWidth: "400px" }}>
      <OverflowText
        rows={2}
        expandable
        expandText="Show more..."
        collapseText="Show less..."
      >
        <Text>
          <strong>Truncation</strong> - Do duis consequat esse consequat eu
          consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
          veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
          elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
          consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
          fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
          elit sint eu elit fugiat magna voluptate commodo fugiat.
        </Text>
      </OverflowText>
    </Flex>
  );
}

export default App;
```

## Common Examples

```tsx theme={null}
import { Overflow } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Overflow.Text rows={1}>
      <Text>{/* Text content */}</Text>
    </Overflow.Text>
  );
}
```

### Overflow text

To handle the overflow of text content, you can use the `Overflow.Text` component. By default, it will limit the text to a single line:

overflowtext-rows-1

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

```tsx lines expandable theme={null}
import { Flex, OverflowText } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ maxWidth: "400px" }}>
      <OverflowText>
        <strong>Truncation</strong> - Do duis consequat esse consequat eu
        consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
        veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
        elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
        consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
        fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
        elit sint eu elit fugiat magna voluptate commodo fugiat.
      </OverflowText>
    </Flex>
  );
}

export default App;
```

#### Adjusting rows of overflow text

You can increase the number of visible rows by setting the `rows` prop:

overflowtext-rows-3

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

```tsx lines expandable theme={null}
import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ maxWidth: "400px" }}>
      <OverflowText rows={3}>
        <Text>
          <strong>Truncation</strong> - Do duis consequat esse consequat eu
          consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
          veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
          elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
          consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
          fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
          elit sint eu elit fugiat magna voluptate commodo fugiat.
        </Text>
      </OverflowText>
    </Flex>
  );
}

export default App;
```

#### Truncating overflow text

To display a "Show more..." button on overflow text, you can use the `expandable` prop. For more custom use cases, you can also use the `expandText`/`collapseText` and `onExpand`/`onCollapse` props to customize the displayed text and event handlers:

overflowtext-expandable

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

```tsx lines expandable theme={null}
import { Flex, OverflowText, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ maxWidth: "400px" }}>
      <OverflowText rows={3} expandable>
        <Text>
          <strong>Truncation</strong> - Do duis consequat esse consequat eu
          consectetur culpa incididunt magna sit. Laboris ad dolor fugiat anim
          veniam ullamco aliquip eiusmod. Officia pariatur ad sint elit sint eu
          elit fugiat magna voluptate commodo fugiat. Do duis consequat esse
          consequat eu consectetur culpa incididunt magna sit. Laboris ad dolor
          fugiat anim veniam ullamco aliquip eiusmod. Officia pariatur ad sint
          elit sint eu elit fugiat magna voluptate commodo fugiat.
        </Text>
      </OverflowText>
    </Flex>
  );
}

export default App;
```

## React Accessibility

* The component automatically disables keyboard-focusable elements when they are not visible in the truncated view
* The expand/collapse button is keyboard accessible
* Content is properly structured for screen readers

**OverflowText Props**

```tsx theme={null}
import { Overflow } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Overflow.Text
      rows={1}
      expandable={false}
      expandText="Show more..."
      collapseText="Show less..."
    >
      <Text>{/* Text content */}</Text>
    </Overflow.Text>
  );
}
```

## `OverflowText` Props

In addition to the props listed below, the `OverflowText` component can accept any valid HTML `div` props:

**collapseText** `string` (default: Show less...)

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

**expandText** `string` (default: Show more...)

**onCollapse** `(e: MouseEvent\<HTMLButtonElement\>) =\> void`

**onExpand** `(e: MouseEvent\<HTMLButtonElement\>) =\> void`

**rows** `number | "unlimited"` (default: 1)


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