v149 · CSS · text-overflow · Input
Field Types Test
Chrome 149's clip-on-focus fix applies to different input types. Click into any field below to see the ellipsis disappear and the full text become visible. Tab through all fields to test keyboard navigation.
Every input below has
Click or Tab into a field → the ellipsis disappears and you can see/edit the full content (Chrome 149+).
Click away (blur) → the ellipsis returns.
text-overflow: ellipsis; overflow: hidden; white-space: nowrap; in CSS.Click or Tab into a field → the ellipsis disappears and you can see/edit the full content (Chrome 149+).
Click away (blur) → the ellipsis returns.
| Input type | text-overflow: ellipsis applies when blurred | Clips to show full text on focus (Chrome 149) | Notes |
|---|---|---|---|
type="text" | ✓ | ✓ | Primary fix target |
type="email" | ✓ | ✓ | Email addresses often overflow |
type="url" | ✓ | ✓ | Long URLs benefit most |
type="search" | ✓ | ✓ | Search queries |
type="password" | ✓ | ✓ | Long passwords (shown as dots) |
type="tel" | ✓ | ✓ | Phone numbers |
type="number" | ✓ | ✓ | Numbers with many digits |
contenteditable | ✓ | ✓ | Editable divs also fixed |
type="textarea" | N/A | N/A | Textareas use overflow-y scroll; not single-line |
see also
- Before/After Compare — old vs new Chrome behaviour
- Interaction Demo — focus/blur toggle
- Editing Scenarios — bidirectional text and edge cases
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗