MiddleTruncate

text-overflow: ellipsis throws away the end of a string — which is usually the part that identifies it. A file name loses its extension, a record title loses its suffix, and two different values can render identically:

The first line is MiddleTruncate; the second is a plain text-overflow: ellipsis on the same string, at the same width.

Measurement is seed-design's: it re-measures on resize with a ResizeObserver and touches the DOM only inside an effect, so the full string renders on the server and narrows on hydration. The untruncated value is always kept in title, so what the eye loses stays reachable.

It owns no pixels — there is no recipe, because seed ships no stylesheet for it either. It inherits the type around it, which is what makes it usable inside a table cell.

Installation

npm install @crisp-ui-kit/crisp

Props