# nord-truncate > Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows. ## 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-clamp` directly 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 `title` attribute 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: ellipsis` quirk 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 ``-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`, ``, 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: ```html Suspendisse blandit sodales… ``` For non-interactive parents (`

`, ``, ``, `

`), no `aria-label` is needed — the truncate's own `aria-describedby` wiring already exposes the full text to assistive tech. ## Examples ### Basic ```html

${longText}

``` ### Not Truncated ```html

Short text fits

``` ### In Table Cell ```html
Description Status
${longText} Active
Short value Active
``` ### In Nav Item ```html ${longText} Short fits ``` ### Multi Line Clamp ```html

${longText}

${longText}

``` ### With Offset ```html side-offset — ${longText} align-offset — ${longText} ``` ### Doc Overview ```html
This is a long piece of text that will be clamped to a single line, with the full value available in a tooltip.
``` ### Doc Multi Line ```html
This is a longer passage of text that is allowed to wrap onto two lines before it is clamped, with the remainder available in a tooltip.
``` ### Doc In Table Cell ```html
Bath Clinic, 12 Pulteney Bridge, Bath, Somerset BA2 4AT, United Kingdom
``` ### Doc No Tooltip ```html
This text is clamped visually but does not reveal a tooltip on hover.
``` ## API Reference ### Properties - **position** (`'block-end' | 'block-start' | 'inline-start' | 'inline-end'`, default: `'block-start'`) — Position of the tooltip relative to the truncated text. Mirrors nord-tooltip. - **delay** (`number`, default: `500`) — Delay in milliseconds before the tooltip opens. - **side-offset** (`number`, default: `8`) — 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. - **align-offset** (`number`, default: `0`) — 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. - **line-clamp** (`number`, default: `1`) — 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. - **no-tooltip** (`boolean`, default: `false`) — 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. ### Slots - **(default)** — The full text content. Plain text is recommended; rich markup is not supported (only textContent is read for truncation). ### Dependencies - `tooltip`