Truncated Text
Text that ends with an ellipsis when it doesn't fit, and shows the full text in a tooltip only while it is cut off.
Single line
By default the text stays on one line. Hover or focus a prompt that is cut off to read all of it; prompts that fit show no tooltip. Overflow is measured when the pointer enters or the text gets focus, so there is no layout work until someone wants to read it.
Set typography and color with className. Truncated Text needs a TooltipProvider above it, which apps already render at the root.
In a flex row
In a flex row, give the text min-w-0 flex-1 so it can shrink, and shrink-0 to the icons and metadata that should keep their size. Any flex parent between the row and the text also needs min-w-0.
Multiple lines
lines clamps the text to that many lines before the ellipsis. The tooltip still appears only when text is hidden.
Custom tooltip
The tooltip shows the children by default. Pass tooltip when the children are rich content and the tooltip should be plain text, and tooltipSide or tooltipSideOffset to move it. When a parent owns the tooltip, disableTooltip turns it off; the ref still points at the truncating element so the parent can measure it.
Properties
The text to show. Also the tooltip content unless tooltip is set
Tooltip content to show instead of children
Lines to show before the ellipsis
Default: 1
Turns off the tooltip when a parent owns it
Side the tooltip opens toward
Default: top
Distance in pixels between the tooltip and the text. Defaults to the tooltip's own offset
Additional CSS classes for the truncating element, such as typography and color
Ref to the truncating element