Truncate text in the middle while preserving start and end.
Features
- Three truncation strategies: fixed end, flexible with minimum, or even split.
- Pixel-accurate measurement based on actual rendered text width.
- Automatically recalculates when container resizes.
Installation
pnpm dlx shadcn@latest add @ncdai/middle-truncation
Usage
import { MiddleTruncation } from "@/components/middle-truncation"<MiddleTruncation>
/Users/ncdai/Code/chanhdai.com/src/components/ui/button.tsx
</MiddleTruncation>API Reference
MiddleTruncation
Prop
Type
Examples
Fixed End
Always preserve exactly a fixed number of characters at the end.
<MiddleTruncation end={4}>
FY26_Q1_Consolidated_Financial_Statements.pdf
</MiddleTruncation>Flexible with Minimum
Split text evenly, but ensure at least a minimum number of characters at the end.
<MiddleTruncation minEnd={12}>
/Users/ncdai/Code/chanhdai.com/node_modules/shadcn/package.json
</MiddleTruncation>Even Split
Split text evenly in the middle when no constraints are provided.
<MiddleTruncation>
/Users/ncdai/Code/chanhdai.com/src/components/ui/button.tsx
</MiddleTruncation>