v149 · CSS · text-overflow

Search Results Demo

Search bars, result titles, and URL fields all use text-overflow: ellipsis. Chrome 149 fixes the editing UX: click into a truncated field and the ellipsis gives way so you can see — and edit — the whole value.

try it: search bar

Paste a long query or pick a preset below. The input shows ellipsis when idle. Click to focus — the full text appears.

Search bar state: idle — ellipsis shown
Caret status: focus the search box, press End, then use ArrowLeft or ArrowRight.

search results with editable titles

Each result title and URL is a real editable field constrained to the card width. Click a field, type, or move the caret to the end: the idle ellipsis should give way to clipped text during interaction.

Result field state: no result field focused yet. Click a title or URL below.

behaviour summary

State Chrome < 149 Chrome 149+
Input idle (unfocused) ellipsis shown ellipsis shown
Input focused (typing) ellipsis persists while typing — confusing clips to full text — editable
Caret at end (past visible area) ellipsis hides caret position clips — caret visible at end
Input blurred ellipsis returns ellipsis returns

the fix in one line

/* CSS stays exactly the same — Chrome 149 changes browser behaviour */
input {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* When focused:
   Chrome <149: text-overflow: ellipsis (bad — can't see what you're editing)
   Chrome 149+: text-overflow: clip    (good — full text revealed) */

see also

implementation reference

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