Truncate | Glaze design system

Position

When to use it

Use: An ID, a hash or a path in a narrow column, where the tail is what tells two apart.
Use: A title in a row that must stay one line.
Use: Any cut value someone needs to read whole: the hint shows it on hover and focus.
Not for: A paragraph that can wrap; let it wrap. Use Card.
Not for: A row's title, which already truncates. Use Item.

6 rules

Must: Use position="middle" for an ID, a hash, a key or a path. Because IDs share their prefix, so an end cut leaves run_01J9ZK… on every row and nobody can tell them apart.
Must: Pass the full value as a plain string child. Because Truncate measures and splits the string, and the hint repeats it; an element child cannot be cut in the middle.
Never: Cut a value in code with slice or a fixed character count. Because a sliced string loses the rest for copy, find and a screen reader, and cuts at the wrong place at every other width.
Must: Give Truncate a parent with a width it cannot grow past: min-w-0 in a flex row, or a max-w. Because a flex child grows to its content by default, so the value never runs out of room and never cuts.
Never: Add a title attribute for the full value; the hint already shows it. Because a title opens a second, unstyled tooltip over the hint, and only for mouse users.
Should: Set an ID's mono through type-code-sm or type-code-xs on Truncate. Because mono at the sans size reads a size bigger than the text beside it.

3 checks

: The DOM holds the whole value, so a screen reader, copy and find in page get all of it.
: Only a cut value takes a tab stop; focus opens the hint, Escape closes it.
: The hint is Tooltip's ink chip, 20:1, and is the same words as the value.

2 keys

6 edge cases

Value fits: Plain text: no hint and no tab stop.
Very narrow: The head goes first; the tail and the ellipsis stay.
Emoji or accents: The cut lands between characters a person sees, never inside one.
Copy of a cut value: Copies the full string.
Touch screen: A tap pins the hint open; the next tap or Escape closes it.
Font loads late: It measures again once the font is ready.

5 props

8 tokens