Options
TruncatedText renders body text throughText, 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.