v148 · CSS · UX

Clip Text overflow on user interaction

When a user clicks or navigates into a text element styled with text-overflow: ellipsis, Chrome now automatically switches to clip — revealing the full content for editing or selection without any JavaScript.

concepts

  1. Truncated List

    A task list where each item is clipped to a single line with an ellipsis. Click any item to focus it and watch the full text reveal automatically — then blur to return to truncated view.

  2. Live Edit

    Single-line <input> and contenteditable elements showing how the automatic clip-on-focus behaviour applies to both form controls and editable regions.

  3. Editable Cell Grid

    A spreadsheet-style grid where every cell's content is truncated with an ellipsis until you click — Chrome 149 then automatically clips to show the full content for editing. Tab between cells to see the transition in action across all columns.

  4. Overflow Reveal Animator

    Text cards with text-overflow: ellipsis that animate to full width on hover/focus. Sliders control animation duration, clip width, and card count. Toggle between CSS-only (:focus-within) and JS-driven expand modes, select single-line / multiline / mixed content, and compare the reflow cost of each approach via a built-in micro-benchmark.

  5. Inline Tag Editor

    A tag-chip interface where each chip holds an editable <input> styled with text-overflow: ellipsis. Click any chip to focus it — Chrome 149 automatically clips the overflow to reveal the full label for editing. Blur to restore the ellipsis. Add chips with long names and tab between them to see the behaviour in action.

why it shipped

Before Chrome 149, a single-line element styled with overflow: hidden; text-overflow: ellipsis; white-space: nowrap would continue to show the ellipsis even when the user clicked into it to edit or select text. Developers had to add JavaScript focus/blur listeners to toggle the overflow property or use a hidden input trick. Chrome 149 makes the browser do this automatically: on focus (or caret navigation) into any element with text-overflow: ellipsis, the overflow is rendered as clip so the user can see and interact with the full content, then restores the ellipsis on blur.

references