Skip to main content

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

​
Keyboard Interaction

Users can toggle the expanded state using standard keyboard controls.
Last modified on July 25, 2026