Truncate
Truncate is a text wrapper that applies single-line or multi-line ellipsis truncation and automatically reveals a tooltip with the full text when the content actually overflows its container. Truncation is performed in JS (the DOM text node is replaced with a pre-truncated string + ellipsis), matching the approach used by Ant Design Pro's `Ellipsis` component. This avoids the well-known CSS `text-overflow: ellipsis` quirk where clicking inside the clipped text shifts the line and loses the ellipsis — there is no overflow to scroll because the visible text fits exactly.
Properties
| 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 |
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:
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.
Integration
For integration guidelines, please see Web Components documentation .