Truncation position
In a breadcrumb trail shown as a value, such as a location column, the last crumb is usually the part that matters. @position="start" keeps the end of the trail visible, and @position="middle" keeps the whole last crumb and as much of the start as fits, so a path reads like /src/compon…/Menu.module.css. The ⋯ button sits where the cut is. Its accessible name and tooltip are still the full trail. A breadcrumb <nav> made of links is different: each link is its own Reveal Host, which can cut at the start too (see Shared link). See The component.
- End
- Home › Projects › Infrastructure Modernization › Phase Two › Network Migration Plan
- Start
- Home › Projects › Infrastructure Modernization › Phase Two › Network Migration Plan
- Middle
- Home › Projects › Infrastructure Modernization › Phase Two › Network Migration Plan
- Middle
- /src/components/Menu/Menu.module.css
Link
The link itself is the clip. It keeps the browser's own ellipsis and shows its tooltip only while its text is clipped. See Reveal Hosts.
File upload
The visually hidden input takes focus, so it hosts the tooltip. The file name it reveals sits in its label. A long file name is preselected; choose another file to replace it. As the rules require, the tooltip mounts beside the label rather than inside it.
Select trigger
A button-based select. The selected value is the clip, and the button is the host. The tooltip doesn't show while the listbox is open (aria-expanded="true").
- Infrastructure Modernization Program, Phase Two
- Customer Onboarding Experience Research
- Q3 Budget
Locked host with a reason
An optional extension. While locked, the button stays focusable with aria-disabled="true". Its tooltip shows the reason even when nothing is clipped, and shows "value: reason" when the value is clipped too. See Locked hosts.
Table cells
Text cells use a Reveal Button. Link cells make the link a Reveal Host, with each stacked line as its own clip. The name cell is a link where the record can be opened and plain text where it can't. The last column is a visually hidden copy, so it stays plain text. See Consumers.
| Name | Document | Summary | |
|---|---|---|---|
| Alexandria Montgomery-Fitzgerald | alexandria.montgomery-fitzgerald@example.com | Quarterly Planning Notes Finance / Planning / 2026 / Third Quarter | Alexandria Montgomery-Fitzgerald shared Quarterly Planning Notes |
| Bartholomew Okonkwo-Lindqvist | b.okonkwo-lindqvist@example.com | Customer Onboarding Research Synthesis Research / Onboarding | Bartholomew Okonkwo-Lindqvist shared Customer Onboarding Research Synthesis |
| Chen Wei | chen.wei@example.com | Q3 Budget Finance | Chen Wei shared Q3 Budget |
Title with identifier
The identifier always stays whole. Inside a link, the title can only clip, because the link is the host. Outside a link, the title gets its own Reveal Button.
Grouped values
A cell that stands for several values always shows the ⋯ button, which lists every value. The first name clips under it. A group with a single item uses a plain <Truncation>.
Name label with translated copy
The translated sentence is split around a placeholder character, so the name can truncate wherever the language places it in the sentence: first, mid-sentence, or last. That placement is separate from @position, which picks where the value itself is cut.
No scroll timeline (fallback)
Without scroll-driven animations, the plain text wraps anywhere, so nothing is lost. Browsers can't turn @supports off on demand, so the frame below is a simulation: it applies the same fallback rules through a class.