Geist Design System

MiddleTruncate

Truncates text in the middle, preserving the start and end of the string for maximum readability.

Examples

Covers strings that benefit from middle truncation.

Branch
feature/redesign-dashboard-navigation-with-sidebar-improvements
Preview URL
platform-web-git-feature-redesign-dashboard-navigation-phamous.vercel.app
Deployment ID
dpl_8gmXTT1yJRP8UbGfXD7A3sp4RKhW
Commit SHA
2b0874e797d7c2a4092d0033ee0c2f0f9aef2869
File path
apps/vercel-site/app/(dashboard)/[teamSlug]/[project]/settings/page.tsx
Custom domain
api.internal.platform-observability.example.com
Model name
google/gemini-3.1-flash-image-preview
Tight width
feature/redesign-dashboard-navigation-with-sidebar-improvements
Fits as-is
sidebar.tsx

Best Practices

When to use

  • Use Middle Truncate for strings whose head and tail both carry information: file paths (apps/.../page.tsx), URLs, deployment IDs (dpl_…abc123), commit hashes, branch names with prefixes.
  • For prose, descriptions, and headings, use end-truncation with … instead; cutting the middle of a sentence destroys meaning.
  • For any truncated value the user might need verbatim, pair with a Tooltip showing the full string or a copy-on-click affordance.

Behavior

  • The component listens to its container width, so layouts that change width on hover (expanding cards, animated rows) cause the truncation point to jitter. Lock the width during interaction.
  • Copying truncated text yields the full original string from the underlying value, not the visible ellipsis form. Confirm this stays true if wrapping with custom onCopy.
  • Don’t wrap Middle Truncate in another text-overflow: ellipsis container; the two strategies fight each other and the inner ellipsis wins inconsistently.

Accessibility

  • Expose the full string to assistive tech via the wrapping element’s accessible name (the component already keeps the full value in the DOM for copy).
  • Avoid Middle Truncate inside focusable controls without an explicit aria-label; the ellipsis on its own gives screen readers nothing to announce.
  • Keep the visible string long enough on small viewports that the head still identifies the resource (path segment, ID prefix).