MiddleTruncate

Long text that keeps its start and end visible.

Source

URLs, paths, keys, and events

Keep the end visible. CopyButton copies the full value.

posthog.com/docs/advanced-configuration/feature-flags
/workspace/posthog/frontend/src/scenes/feature-flags/FeatureFlag.tsx
phc_example_public_project_key_0123456789abcdef
subscription_checkout_payment_confirmation_completed

Available width

The same path in narrower boxes. The end stays visible at every width.

480px
posthog.com/docs/advanced-configuration/feature-flags
240px
posthog.com/docs/advanced-configuration/feature-flags
140px
posthog.com/docs/advanced-configuration/feature-flags
Fits
feature-flags

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Use MiddleTruncate for identifiers where both ends matter, such as keys, IDs, and file paths. Do not use it for prose.
  • It needs a width limit. Add min-w-0 to flex and grid parents.
  • Truncation is visual only. It does not hide secrets.

API

MiddleTruncate accepts span element props. Pass the full string as children.

MiddleTruncate

PropTypeDefaultDescription
childrenstring–The full value to display and copy.
endCharsnumber16Sets the suffix length in Unicode code points. Values below one become one.
titlestringchildrenSets the native hover text.
classNamestring–Sets width, font, and other span styles.