Middle Truncation

Truncate text in the middle while preserving start and end.

runed
<MiddleTruncation>
/Users/ncdai/Code/chanhdai.com/src/components/ui/button.svelte
<MiddleTruncation end={4}>
FY26_Q1_Consolidated_Financial_Statements.pdf
<MiddleTruncation minEnd={12}>
/Users/ncdai/Code/chanhdai.com/node_modules/shadcn/package.json
<MiddleTruncation ellipsis=" ... ">
https://www.apple.com/newsroom/pdfs/fy2026-q1/FY26_Q1_Consolidated_Financial_Statements.pdf

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/middle-truncation.json

Usage

usage.svelte

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

Examples

File names

Preserve file extensions while truncating names inside a resizable container.

building-accessible-command-menus-in-svelte.mdresponsive-component-preview.sveltemasonry-grid-layout.ts

Props

MiddleTruncation

Responsive middle truncation for a single line of text.

NameTypeDefaultDescription
textstringrequiredText content to truncate.
ellipsisstring'...'Custom separator shown between the preserved text segments.
endnumberundefinedFixed number of characters preserved at the end; cannot be combined with minEnd.
minEndnumberundefinedMinimum trailing characters preserved during an even split; cannot be combined with end.
classstringundefinedAdditional classes applied to the wrapper span.