Swapped "..." for "\2026" which is the Unicode ellipsis character (…). It renders as a single proper typographic ellipsis glyph rather than three separate periods, so it looks tighter and more natural in the center overlay.

Here's the breakdown of the pure-CSS center truncation technique:

The structure is a flex container with a <span> child holding the string, and the same string duplicated via a data-string attribute read by ::after using content: attr(data-string).

The two halves: The <span> is standard LTR and clips from the right. The ::after pseudo is set to direction: rtl so it clips from the left, preserving the tail end of the string. Both are capped at max-width: 50% so they can never show overlapping characters.

The ellipsis overlay: A ::before pseudo sits absolutely centered between the two halves with content: "\2026" (the … character). Its background is a horizontal gradient (transparent -> bg-color -> bg-color -> transparent) that fades out the raw clipped edges of both text halves underneath, creating a smooth transition into the ellipsis.

The container query: Since we use a monospace font, 1ch equals exactly one character. The full UUID is 36 chars, so @container (min-width: 36ch) hides the ::after and ::before entirely, showing the full untruncated string. Below that threshold the two-half + overlay system kicks in. No JavaScript involved at any point.