Orbit

Truncated

Source

Clamps overflowing content and reveals the full value in a tooltip, but only when the content actually overflows.

Single line

The default clamps to one line with an ellipsis. Hover or focus the text to see the full value.

This is a long string that will not fit within the constrained width of its container and therefore needs to be truncated.

<Box width={280}>
  <Truncated>{longText}</Truncated>
</Box>

Set lines to clamp to a fixed number of lines using a line clamp.

This is a long string that will not fit within the constrained width of its container and therefore needs to be truncated.

<Box width={280}>
  <Truncated lines={2}>{longText}</Truncated>
</Box>

When the content fits, nothing is clamped and no tooltip is attached.

Short label

Pass tooltip to replace the default card with your own content.

This is a long string that will not fit within the constrained width of its container and therefore needs to be truncated.

<Box width={280}>
  <Truncated tooltip={<CustomTooltip />}>{longText}</Truncated>
</Box>

children

required

Content to clamp. Also used as the default tooltip body.

lines

numberdefault: 1

Number of lines before clamping. One line truncates with an ellipsis; more uses a line clamp.

tooltip

Custom tooltip content shown on overflow. Defaults to the full children inside a card.

className

Classes merged onto the clamping wrapper.