Overflow Text

Implementation
OverflowText Props

Live Component Playground

Common Examples

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:

Adjusting rows of overflow text

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

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:

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

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:

string

default:"Show less..."

boolean

default:"false"

string

default:"Show more..."

(e: MouseEvent<HTMLButtonElement>) => void

number | "unlimited"

default:"1"

Anvil2 Web

Resources

Overflow Text – Code

Live Component Playground

Common Examples

Overflow text

Adjusting rows of overflow text

Truncating overflow text

React Accessibility

`OverflowText` Props

​Live Component Playground

​Common Examples

​Overflow text

​Adjusting rows of overflow text

​Truncating overflow text

​React Accessibility

​OverflowText Props

Live Component Playground

Common Examples

Overflow text

Adjusting rows of overflow text

Truncating overflow text

React Accessibility

`OverflowText` Props