v147 · CSS · Text

Overflow Text Editor

Click into any of the truncated text fields below. Chrome 147 automatically switches from text-overflow: ellipsis to clip on focus — revealing the full content for editing. No JavaScript required for the core behaviour.

Single-line form fields

Click any field to reveal and edit the full content.

File path

/home/user/projects/my-very-long-project-name/src/components/navigation/TopBar.tsx

Long URL

https://example.com/api/v3/users/12345/preferences?theme=dark&language=en-US&timezone=Europe/London

Email address

very.long.email.address.that.does.not.fit@subdomain.example.co.uk

Git commit message

fix: resolve race condition in authentication middleware when token refresh overlaps with request retry

CSS selector

.container > .row:nth-child(2n+1) .card[data-type="featured"]:not(.hidden) span.label

JSON key

{"user":{"profile":{"displayName":"Alexandra Bartholomew-Whitfield","title":"Senior Principal Engineer"}}}

Adjustable container width

Drag the slider to change how much text is truncated, then click to edit.

Container width 300px

Resize me: the quick brown fox jumps over the lazy dog — edit this text to see how the clipping adapts as you change the container width.

The clip-box is styled with text-overflow: ellipsis at rest and clip on :focus — no JS needed for this behaviour in Chrome 147.

CSS behind the demo

/* At rest: truncate with ellipsis */
.clip-box {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On interaction: reveal full content */
.clip-box:focus {
  text-overflow: clip;   /* Chrome 147 makes this automatic */
}

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗