Text truncation
Prefer wrapping text. Truncate only when the layout requires it, and always give a way to see the full text.
Prefer wrapping
Truncated text is hidden content. People who zoom in, longer translations (Vietnamese often runs 20–30% longer than English) and touch users lose the most.
{/* Default: let text wrap; wrap-break-word for long strings without spaces */}
<Card className="w-72">
<CardHeader
image={<Document20Regular />}
header={<span className="wrap-break-word">Consolidated report on revenue and operating costs for Q3…</span>}
description="Updated yesterday"
/>
</Card>Truncate only when there is a real constraint: table or list rows that need an even height, navigation bars, tabs, breadcrumbs, chips in an input, file names in a fixed frame.
How to truncate
Three tools with one requirement: the element must have a constrained width.
Consolidated report on revenue and operating costs for Q3 2026 (version for the board of directors)
Consolidated report on revenue and operating costs for Q3 2026 (version for the board of directors)
{/* One line: needs a constrained width; in flex, the element needs min-w-0 */}
<p className="truncate">…</p>
{/* Several lines */}
<p className="line-clamp-2">…</p>
{/* Text component */}
<Text truncate wrap={false} block>…</Text>
{/* In flex: without min-w-0, truncate has no effect */}
<div className="flex items-center gap-2">
<Document20Regular className="shrink-0" />
<span className="min-w-0 flex-1 truncate">…</span>
</div>Some components have truncation built in: TableCellLayout truncate, Persona, MenuItem (long labels), the value of Dropdown, Tag. Screen readers still read the full text; truncation only affects what is visible.
Show the full text
Every truncated string needs a way to the full content that works with mouse, keyboard and touch.
Hover or Tab to each link. Only the truncated link shows a tooltip.
import * as React from "react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui";
/** A link that shows the full-text tooltip only when the text is actually truncated. */
export function TruncatedLink({ href, children }: { href: string; children: string }) {
const ref = React.useRef<HTMLAnchorElement>(null);
const [open, setOpen] = React.useState(false);
const isTruncated = () => {
const el = ref.current;
return !!el && el.scrollWidth > el.clientWidth;
};
return (
<Tooltip open={open} onOpenChange={(next) => setOpen(next && isTruncated())}>
<TooltipTrigger asChild>
<a ref={ref} href={href} className="block min-w-0 truncate text-link hover:underline">
{children}
</a>
</TooltipTrigger>
<TooltipContent className="max-w-80 break-all">{children}</TooltipContent>
</Tooltip>
);
}- Put the tooltip on an element that is already focusable (a link, a button, an interactive table cell). Don't add
tabIndexto a paragraph just to get a tooltip; let it wrap or open a detail page. titleis the bare minimum: it only shows on hover and does not work with the keyboard or touch.- In tables and lists, a detail page or an expandable panel is the best place for the full text.