Middle Truncate

Truncate long strings from the middle.

Default

Put the start of the value in MiddleTruncate and the last characters in a span beside it, in a flex row. The start shortens with an ellipsis; the end stays whole.

CALL-4506a1f2-9c3e-4b7d-8e21-5f0c9a3de550

Container width

Truncation follows the container. At full width the value shows in full with no ellipsis.

CALL-4506a1f2-9c3e-4b7d-8e21-5f0c9a3de550CALL-4506a1f2-9c3e-4b7d-8e21-5f0c9a3de550CALL-4506a1f2-9c3e-4b7d-8e21-5f0c9a3de550

import { MiddleTruncate } from "@smallest-inc/ui";

const callId = "CALL-4506a1f2-9c3e-4b7d-8e21-5f0c9a3de550";

export default function MiddleTruncateWidths() {
  return (
    <div className="flex w-full flex-col gap-3">
      {["w-40", "w-64", "w-full"].map((width) => (
        <span key={width} title={callId} className={`flex min-w-0 text-sm text-fg ${width}`}>
          <MiddleTruncate>{callId.slice(0, -6)}</MiddleTruncate>
          <span className="shrink-0">{callId.slice(-6)}</span>
        </span>
      ))}
    </div>
  );
}

End characters

Keep the part people recognise: a file extension, the last URL segment, or the last characters of an ID.

outbound-renewal-campaign-recording-2026-09-14.wavhttps://hooks.acme-insurance.com/voice/events/inboundagent_8f2c4b9e1a7d3f6c0e5b2a9d4c7f1e3b

import { MiddleTruncate } from "@smallest-inc/ui";

const values = [
  { value: "outbound-renewal-campaign-recording-2026-09-14.wav", keep: 9 },
  { value: "https://hooks.acme-insurance.com/voice/events/inbound", keep: 14 },
  { value: "agent_8f2c4b9e1a7d3f6c0e5b2a9d4c7f1e3b", keep: 4 },
];

export default function MiddleTruncateEndCharacters() {
  return (
    <div className="flex w-64 flex-col gap-3">
      {values.map(({ value, keep }) => (
        <span key={value} title={value} className="flex min-w-0 text-sm text-fg">
          <MiddleTruncate>{value.slice(0, -keep)}</MiddleTruncate>
          <span className="shrink-0">{value.slice(-keep)}</span>
        </span>
      ))}
    </div>
  );
}

In a list

Pass the truncated value as the EntityContent description. Pair it with a copy button so people can reuse the full value.

Call completed
https://hooks.acme-insurance.com/voice/events/call-completed
Transcript ready
https://hooks.acme-insurance.com/voice/events/transcript-ready
Campaign finished
https://api.northwind.io/integrations/smallest/campaign-finished

import {
  Button,
  CopyIcon,
  Entity,
  EntityAside,
  EntityContent,
  List,
  ListItem,
  MiddleTruncate,
} from "@smallest-inc/ui";

const webhooks = [
  { name: "Call completed", url: "https://hooks.acme-insurance.com/voice/events/call-completed" },
  { name: "Transcript ready", url: "https://hooks.acme-insurance.com/voice/events/transcript-ready" },
  { name: "Campaign finished", url: "https://api.northwind.io/integrations/smallest/campaign-finished" },
];

export default function MiddleTruncateInList() {
  return (
    <div className="w-full max-w-md">
      <List>
        {webhooks.map((webhook) => (
          <ListItem key={webhook.name} actions>
            <Entity>
              <EntityContent
                title={webhook.name}
                description={
                  <span title={webhook.url} className="flex min-w-0">
                    <MiddleTruncate>{webhook.url.slice(0, -18)}</MiddleTruncate>
                    <span className="shrink-0">{webhook.url.slice(-18)}</span>
                  </span>
                }
              />
              <EntityAside>
                <Button
                  iconOnly
                  variant="transparent"
                  size="xs"
                  aria-label={`Copy ${webhook.name} URL`}
                  onClick={() => void navigator.clipboard.writeText(webhook.url)}
                >
                  <CopyIcon />
                </Button>
              </EntityAside>
            </Entity>
          </ListItem>
        ))}
      </List>
    </div>
  );
}

Best practices

When to use

Use for long identifiers where the start and end carry recognition: call IDs, webhook URLs, file names, agent IDs.
Use ordinary truncation for natural-language labels, where the beginning carries the meaning.

Behavior

Keep the characters people recognise at the end: a file extension, the last URL segment, the last 6 characters of an ID.
Truncation follows the container; at full width the whole value shows with no ellipsis.

Accessibility

Put the full value in title and keep it in the accessible name. Provide a copy button ("Copy Call completed URL") when people are likely to reuse the exact value.

PreviousLists NextMulti Select