Truncate New
Clamps overflowing text to one or more lines, revealing the full value in a tooltip.
Usage
Truncate clamps text that overflows its container and, by default, shows the full value in a tooltip on hover and focus.
import "@nordhealth/components/lib/Truncate"
Examples
Multi-line clamp
Use line-clamp to allow more than one line before truncating.
In a table cell
Truncate keeps long values from breaking a fixed-width layout such as a table cell.
Without a tooltip
Add no-tooltip when the full value is available elsewhere and you only want the visual clamp.
Not truncated
When the text fits, Truncate shows it in full and no tooltip is offered.
In a nav item
Truncate long labels inside a navigation item so the layout stays compact.
RTL
Truncate follows the document or container direction. Toggle the direction to see the clamp mirror.
Accessibility
- The hidden text remains in the DOM, so it stays available to screen readers even when visually clamped.
- The tooltip is reachable on keyboard focus, not only hover — keep that behaviour unless the full value is presented nearby.
- Use
no-tooltiponly when the complete value is available somewhere else on the page.
API reference
Truncate
Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.
<nord-truncate></nord-truncate>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
position | position | Position of the tooltip relative to the truncated text. Mirrors nord-tooltip. | 'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'block-start' |
delay | delay | Delay in milliseconds before the tooltip opens. | number | 500 |
sideOffset | side-offset | Distance in pixels between the tooltip and the trigger along the main axis.
Mirrors nord-tooltip's side-offset and is forwarded to the portaled
tooltip. Defaults to 8. | number | 8 |
alignOffset | align-offset | Offset in pixels along the tooltip's alignment axis. Mirrors
nord-tooltip's align-offset and is forwarded to the portaled tooltip.
Defaults to 0. | number | 0 |
lineClamp | line-clamp | Maximum number of lines before truncating. Defaults to 1 (single line).
Values >= 2 allow the text to wrap up to that many lines before the
ellipsis kicks in. | number | 1 |
noTooltip | no-tooltip | When set, the component still truncates the text but does not render
a hover tooltip with the full content. The truncated attribute is
still reflected so consumers can style it. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | The full text content. Plain text is recommended; rich markup is not supported (only textContent is read for truncation). |
Dependencies
This component is internally dependent on the following components:
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to truncate single-line text inside a constrained container (table cells, nav items, card metadata) so the layout never breaks.
- Trust the component to add a tooltip only when the text actually overflows — there is no need to detect truncation in application code.
- Provide plain text as the slotted content; the full string is mirrored into the tooltip for screen reader and pointer users.
Don’t
- Don’t use for multi-line text — this component is single-line only. Use
-webkit-line-clampdirectly when you need multi-line clamping. - Don’t nest interactive elements (links, buttons) inside the slot. Apply the truncate component to the label of the interactive element instead.
- Don’t add a
titleattribute on the truncate or its parent. It would produce a second, browser-native tooltip competing with the one this component already provides.
Additional considerations
- The key feature is automatic overflow detection: the component measures the slotted text against its container and only adds the ellipsis and tooltip when the content actually overflows. There is no need to detect truncation in application code.
- Truncation is performed in JS — the text node is replaced with a pre-truncated string plus ellipsis — which avoids the CSS
text-overflow: ellipsisquirk where clicking inside clipped text shifts the line and loses the ellipsis, because the visible text now fits exactly.
Accessibility
The truncate component splits text between two accessibility sources: the visible truncated string is the accessible name of the host, and the full text is exposed as the accessible description via aria-describedby to a portaled nord-tooltip. Screen readers announce both — name then description — as the standard <abbr title>-style pairing, not a double-reading of the same content.
Set aria-label on interactive parents
When nord-truncate is placed inside an interactive element (nord-button, <a>, menu item, tab, etc.), the parent's accessible name is computed from its slotted content — which means the parent ends up named with the truncated string (e.g. "Lorem ipsu…"). That is useless to a screen reader user.
Add aria-label with the full text on the interactive parent:
<nord-button aria-label="Open patient record for Suspendisse blandit sodales…">
<nord-truncate>Suspendisse blandit sodales…</nord-truncate>
</nord-button>
For non-interactive parents (<p>, <td>, <span>, <div>), no aria-label is needed — the truncate's own aria-describedby wiring already exposes the full text to assistive tech.