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:collapseText
string
default:"Show less..."
expandText
string
default:"Show more..."
onCollapse
(e: MouseEvent<HTMLButtonElement>) => void
onExpand
(e: MouseEvent<HTMLButtonElement>) => void
rows
number | "unlimited"
default:"1"
Last modified on January 23, 2026
