Edge cases
Each row exercises a layout or typography case that tends to trip up middle-truncation by string slicing. The same fixtures are covered by Playwright geometry checks.
The preview parent is user-resizable. The value fills that parent so it does not shrink after truncation.
<div className="w-[220px]">
<MiddleTruncate className="w-full" balance={__BALANCE__}>
portal-website/apps/web/src/components/...
</MiddleTruncate>
</div>
The parent is user-resizable, but the component gets no
className. Package CSS alone provides the inline
block and max-width: 100% behavior.
<div className="w-[220px]">
<MiddleTruncate balance={__BALANCE__}>
packages/dashboard/src/routes/accounts/enterprise-contract-history-panel.tsx
</MiddleTruncate>
</div>Font family, size, style, weight, and tracking are applied to the truncating element itself.
<MiddleTruncate
className="w-full font-serif text-xl font-bold italic tracking-wide"
balance={__BALANCE__}
>
ghu_4f2a8d93c17e406db86ad179a02f7c...
</MiddleTruncate>The value inherits typography from a parent. The helper measures the computed font on the actual element.
<div className="w-[220px] font-serif text-xl font-bold italic">
<MiddleTruncate className="w-full" balance={__BALANCE__}>
release-candidate/customer-billing-dashboard...
</MiddleTruncate>
</div>Chinese and Japanese text is segmented by grapheme, not byte or UTF-16 unit, so visible ends stay intact.
<MiddleTruncate className="w-full" balance={__BALANCE__}>
上海研发中心/プロダクト品質保証/長いファイル名と重要な末尾...
</MiddleTruncate>A bold italic serif font makes character counts useless. The result must fit by rendered width.
<div className="w-[220px] font-serif text-2xl italic font-bold">
<MiddleTruncate className="w-full" balance={__BALANCE__}>
Concise prose still needs both its opening clause...
</MiddleTruncate>
</div>
No explicit value width. The middle label is the flex item with
flex: 1.
<div className="flex items-center gap-2">
<span>branch</span>
<MiddleTruncate className="min-w-0 flex-1" balance={__BALANCE__}>
feature/really-long-flexible-middle-label...
</MiddleTruncate>
<span>ready</span>
</div>
The parent width changes continuously with CSS animation. The
truncation should update like native text-overflow,
without feeding its previous text width back into layout.
<div className="animate-width overflow-hidden">
<MiddleTruncate className="w-full" balance={__BALANCE__}>
animation/canary/routes/live-width-contract-regression-check.tsx
</MiddleTruncate>
</div>
No width or max-width on the value or its immediate parent. The
text receives only min-width: 0 and
flex: 1; available space comes from layout.
<section className="grid grid-cols-[auto_minmax(0,1fr)] gap-3">
<aside>repo</aside>
<div className="flex min-w-0 items-center gap-2">
<span>active</span>
<MiddleTruncate className="min-w-0 flex-1" balance={__BALANCE__}>
org/product/platform/packages/client/src/routes/settings/billing...
</MiddleTruncate>
<button>copy</button>
</div>
</section>