Truncate
Use Truncate to shorten overflowing text with an ellipsis.
Page navigation navigation
The component uses the
title attribute to expose
the full content of the component to users. The title attribute is not accessible to keyboard users, as there is
no browser-native mechanism to show title tooltips when navigating with a keyboard.
Truncating static and interactive elements
The most accessible static element is one that is not truncated. It can be very tempting to place a tooltip on hover over a static truncation and call it complete; however, this is not available to keyboard-only users.
For interactive elements, do not truncate text if it contains focusable elements such as links, buttons, and mentions/tags. This includes the focusable element itself as well as truncation that hides focusable elements. Similar to nested interactive controls, truncated focusable elements may not be available to all users, blocking them from potentially completing tasks.
Advice for handling truncation
Before truncating content, ask yourself:
- Can I wrap the text instead of truncating? Wrapping allows all text to be seen and creates a more consistent experience across screen widths.
- Can I give the element in question more real estate to expose all text? Truncating a small portion of text (a few characters, a word) adds friction to a UX that ultimately can be avoided.
- Can I use the progressive disclosure component to expand and collapse text instead? Primer's progressive disclosure utilizes explicit truncation, which requires an action to expand what is displayed. Because this information is available through a button, it gives access to assistive technology users.