Clip text-overflow on user interaction

concepts

1. Interaction Demo

   A text input with text-overflow: ellipsis. Click to focus and interact — the ellipsis disappears and the full text becomes visible and editable. Blur the field and the ellipsis returns.

2. Editing Scenarios

   Multiple field types and overflow directions demonstrating the clip-on-interaction behaviour. Includes a contenteditable element, readonly inputs, and bidirectional text edge cases.

3. Search Results Demo

   A search bar and results list where titles and URLs are truncated with text-overflow: ellipsis. Click into any field to see Chrome 149's clip-on-interaction fix — the ellipsis gives way so you can see and edit the full text.

4. Before/After Compare

   Side-by-side: left column simulates old Chrome (ellipsis stayed visible during editing), right column shows Chrome 149 behaviour (clips to reveal full text on focus). Three paired fields — URL, email, and search — with live focused/blurred state badges.

5. Field Types Test

   Every input type that supports text-overflow: ellipsis — text, email, url, search, password, tel, number, and contenteditable — laid out in a grid. Click or Tab through each to test that Chrome 149's clip-on-focus applies consistently.

6. Overflow Direction Tester

   Chrome 149's clip-on-interaction fix applies to all writing directions. Six fields test LTR overflow from the right and RTL overflow from the left (Arabic, Hebrew, Persian). A width slider and font-size toggle let you reproduce edge cases at different viewport widths. Full-width URL bars in both LTR and RTL show how the fix enables cursor navigation to the hidden end of long strings.

   Interactive RTL Accessibility

why it shipped

Previously, a focused <input> with text-overflow: ellipsis would continue to show the ellipsis while the user typed or moved the caret. This meant users could place the caret in the visible portion of the text but have no idea what was hidden behind the ellipsis, making editing confusing. Chrome 149 follows the expected UX pattern: show ellipsis when idle, show full text when the user is interacting.

the behaviour

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

/* State: unfocused (idle)
   → text-overflow: ellipsis applies — "Long text that doesn'…"

   State: focused (user interacting)
   Chrome 149+: temporarily clips instead of ellipsis
   → "Long text that doesn't fit in this narrow input field"
   (user can see and edit the full content)

   State: blurred (user leaves)
   → text-overflow: ellipsis applies again */

references

• ChromeStatus entry
• MDN — text-overflow