MiddleTruncate

Truncates text in the middle, preserving the start and end of the string for maximum readability. Drag the handle to see how each string reflows.

Select any line above and paste it somewhere. You'll get the original string, not the ellipsis.

Installation

pnpm dlx shadcn@latest add https://mt.rudro.dev/r/middle-truncate.jsonnpx shadcn@latest add https://mt.rudro.dev/r/middle-truncate.jsonyarn shadcn@latest add https://mt.rudro.dev/r/middle-truncate.jsonbunx --bun shadcn@latest add https://mt.rudro.dev/r/middle-truncate.json

Usage

Mount the boot script once at the end of your root layout. It runs inline before hydration so strings are truncated on first paint, no FOUC (Flash of Unstyled Content).

// app/layout.tsx
import { MiddleTruncateBoot } from "@/components/ui/middle-truncate-boot";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <MiddleTruncateBoot />
      </body>
    </html>
  );
}

Then drop <MiddleTruncate text="your text here" /> anywhere inside a container with a bounded width. It measures itself and re-runs on resize.

import { MiddleTruncate } from "@/components/ui/middle-truncate";

<MiddleTruncate text="feature/redesign-dashboard-navigation" />