Truncate
Clipped text: a line clamp, an ellipsis in the middle, and a tooltip that appears only when the text is really cut off.
Component behavior
Truncate clips text by line count or string position. An optional tooltip displays the full text when clipping occurs. Use Text truncate for a one-line trailing ellipsis without a tooltip.
- Identifiers, paths, and hashes whose suffix must remain visible.
- Descriptions clamped to two or three lines in a card or a row.
- Clipped table values with a tooltip showing the full text.
Text truncate: one-line trailing ellipsis is sufficient without a tooltip.
Tooltip: the hint is extra information rather than the same text in full.
Props
Truncate extends HTMLAttributes<HTMLElement> (minus title, which it sets itself).
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "span" | Element to render. |
children | ReactNode | — | The text. String children are what middle truncation and tooltips read. |
lines | number | 1 | Lines to keep. 1 is an ellipsis on one line; above that, a clamp. |
middle | boolean | — | Ellipsis in the middle, keeping the tail visible. Requires string children. |
tailChars | number | 8 | Characters kept at the end when middle. |
tooltip | boolean | — | Displays the full text in a tooltip when clipping occurs. |
text | string | — | Tooltip / title text when the children are not a plain string. |
Examples
One line
Clamped to lines
Middle
Middle truncation preserves an identifier’s suffix. The leading text clips according to available layout width; the suffix does not clip. This uses CSS layout without character counting or measurement.
Tooltip on overflow
Hover both rows. The first is clipped and shows the full value; the second fits and shows nothing.
import { Truncate } from "@solarius/onset";
// One line, full text on hover only when clipped:
<Truncate tooltip>{row.message}</Truncate>
// Keep the end of an identifier:
<Truncate middle tailChars={10}>{pod.name}</Truncate>
// Two-line description in a card:
<Truncate lines={2}>{project.description}</Truncate>See Box & layout for Text truncate, the one-line shorthand.