better-truncate-middle

Middle ellipsis without losing the text.

A polyfill for text-overflow-middle: ellipsis, the CSS proposal the browser never shipped. Pixel-accurate, microsecond-fast, zero-config, and the full string stays in the DOM for copy, find, and accessibility.

Previewselect, copy, or find any part of the textdrag the grip to resize

America Again: Re-becoming the Greatness We Never Weren't by Stephen Colbert (978-0446583978)

Controls

Text

Balancecentered

Fontinherited from parent

component

import 'better-truncate-middle/styles.css';
import { MiddleTruncate } from 'better-truncate-middle/react';

export function PathCell({ path }: { path: string }) {
  return <MiddleTruncate>{path}</MiddleTruncate>;
}

Highlights

Pretext-powered. Zero configuration.

Every visible split comes from a real pixel measurement on the real element. The rest of what's here is what you get when that measurement is fast and reliable.

Zero configuration. No font argument, no width argument, no character count. Give the element a width (or let it inherit one) and the split appears.
Only the rendering is truncated. The full string stays in the DOM as inline text, so selection, copy, find-in-page, screen readers, and search crawlers all see it, exactly as you wrote it.
Measured in pixels, not guessed. A Pretext-backed measurement finds the largest visible start and end that fit the current width. ~90µs per layout pass, fast enough to rerun on every resize tick and font swap without dropping a frame.

The edge-case examples cover flex layouts, inherited fonts, CJK text, animated widths, missing component classes, and proportional fonts.