Middle Truncation

Text

About

A text component that truncates long strings in the middle with an ellipsis, preserving the start and end while auto-recalculating on container resize.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Middle Truncation to your project and fits it to your theme.

Code

How Middle Truncation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MiddleTruncation } from "@/components/ui/middle-truncation";

export default function MiddleTruncationDemo() {
  return (
    <div className="inline-flex bg-background p-6">
      <div className="w-[360px] space-y-4 rounded-lg border bg-card p-5 text-card-foreground shadow-sm">
        <div className="space-y-1">
          <p className="text-xs font-medium text-muted-foreground">
            Even split
          </p>
          <MiddleTruncation className="font-mono text-sm">
            /Users/ncdai/Code/chanhdai.com/src/components/ui/button.tsx
          </MiddleTruncation>
        </div>

        <div className="space-y-1">
          <p className="text-xs font-medium text-muted-foreground">Fixed end</p>
          <MiddleTruncation className="font-mono text-sm" end={4}>
            FY26_Q1_Consolidated_Financial_Statements.pdf
          </MiddleTruncation>
        </div>

        <div className="space-y-1">
          <p className="text-xs font-medium text-muted-foreground">
            Flexible with minimum
          </p>
          <MiddleTruncation className="font-mono text-sm" minEnd={12}>
            /Users/ncdai/Code/chanhdai.com/node_modules/shadcn/package.json
          </MiddleTruncation>
        </div>

        <div className="space-y-1">
          <p className="text-xs font-medium text-muted-foreground">
            Custom ellipsis
          </p>
          <MiddleTruncation className="font-mono text-sm" ellipsis=" ... ">
            https://www.apple.com/newsroom/pdfs/fy2026-q1/FY26_Q1_Consolidated_Financial_Statements.pdf
          </MiddleTruncation>
        </div>
      </div>
    </div>
  );
}