Truncated Text

For development, import TruncatedText from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

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

Sizes

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

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

Highlighted

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

“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 instead.
Block-level formatted content – Truncated Text accepts inline content only, so lists, tables, code, and quotes produce invalid markup. Use the Markdown 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
TruncatedText Props

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 styling and clamps to two lines by default.

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.

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.

Body size

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

Highlighted

Set highlighted to apply the suggested-change treatment.

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.

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

ReactNode

required

Body content. Must be valid HTML phrasing content.

string

Class merged onto the underlying Text element.

boolean

default:"false"

Applies the suggested-change highlight treatment.

"fine" | "compact" | "regular" | "featured"

default:"regular"

Body text size.

number

default:"2"

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

Concepts & Guidelines

Anvil2

Resources

Truncated Text - Web

Options

Sizes

Truncate Line Length

Highlighted

Behavior

Expand and Collapse

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Line limit

Expand and collapse

Body size

Highlighted

Internationalization

React Accessibility

`TruncatedText` Props

​Options

​Sizes

​Truncate Line Length

​Highlighted

​Behavior

​Expand and Collapse

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Line limit

​Expand and collapse

​Body size

​Highlighted

​Internationalization

​React Accessibility

​TruncatedText Props

Options

Sizes

Truncate Line Length

Highlighted

Behavior

Expand and Collapse

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Line limit

Expand and collapse

Body size

Highlighted

Internationalization

React Accessibility

`TruncatedText` Props