Middle Truncation
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 @smlee/middle-truncation
Usage
import { MiddleTruncation } from "@/components/middle-truncation"<MiddleTruncation>
/Users/smlee/Code/smlee.info/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/smlee/Code/smlee.info/node_modules/shadcn/package.json
</MiddleTruncation>Even split
Split text evenly in the middle when no constraints are provided.
<MiddleTruncation>
/Users/smlee/Code/smlee.info/src/components/ui/button.tsx
</MiddleTruncation>