v149 · CSS · Interaction Demo

Interaction Demo

Click into the input fields below. In Chrome 149+, the ellipsis disappears when the field is focused and the full text becomes visible for editing. Blur (click away) to see the ellipsis return.

Chrome 149+ behaviour: When a user focuses an input or textarea with text-overflow: ellipsis, the overflow mode temporarily switches to clip. On blur, it reverts. No CSS or JavaScript change is needed — this is automatic browser behaviour.

visual state comparison

Blurred (idle)

Long filename that doesn't fit
text-overflow: ellipsis active

Focused (interacting)

Long filename that doesn't fit
Chrome 149: switched to clip — full text visible

live demo

Click to focus each input — watch the state badge

text input
blurred
email input
blurred
url input
blurred
search input
blurred

focus/blur log

Interact with the fields above…

code

/* The CSS is unchanged — Chrome 149 handles the behaviour automatically */
input {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 200px;
}

/* No JS needed. Chrome 149+ automatically:
   - Shows ellipsis when input is blurred (default)
   - Clips (shows full text) when input is focused for editing
   - Restores ellipsis when input is blurred again */

see also

implementation reference

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