v149 · css · platform behavior

Clip `text-overflow` on User Interaction

When a user clicks into or navigates by caret through an element that shows a truncation ellipsis (text-overflow: ellipsis), Chrome 149 temporarily clips the text instead — letting the user see and interact with the full hidden content.

at a glance

Shipped in	Chrome 149 (desktop, Android, WebView, iOS)
Status	Platform behaviour change (no new CSS property)
Flag	None
Spec	CSS Overflow Level 3 §ellipsis-interaction
ChromeStatus	5146265241387008 — Clip Text overflow on user interaction

why it exists

text-overflow: ellipsis clips long text and replaces the tail with …, which is useful for labels and single-line display elements. The problem arises when the element is editable or keyboard-focusable: pressing End to jump to the end of a long filename, or clicking the middle of a truncated label in a WYSIWYG editor, could move the caret into invisible content. The user sees the cursor blink but can't tell where they are.

The CSS Overflow spec has always said that text should revert to clipping during user interaction, but the behaviour was only implemented for <input> and <textarea> form controls. Chrome 149 extends this to all elements — including contenteditable divs and any focusable element — matching what the spec requires.

Source: CSS Overflow Level 3 §ellipsis-interaction and blink-dev Intent to Ship.

what changes

Before Chrome 149	Elements with `text-overflow: ellipsis` (other than `<input>` / `<textarea>`) kept showing `…` even when focused or edited, hiding the caret and part of the content.
Chrome 149+	When the user focuses, clicks, or moves the caret inside such an element, the overflow mode temporarily switches to `clip`. The full text is visible during interaction. When focus leaves the element, the ellipsis is restored.
Affected elements	All elements with `overflow: hidden; white-space: nowrap; text-overflow: ellipsis` that receive focus or editing. This includes `contenteditable`, elements with `tabindex`, and form controls (already worked).

Source: CSS Overflow Level 3 §ellipsis-interaction.

example

Try it: click the label below and navigate with keyboard

In Chrome 149+, clicking into the box below or pressing End will reveal the full text:

This is a very long line of text that gets truncated with an ellipsis in the display

.label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 260px;
  /* Chrome 149: clicking/tabbing into this element
     temporarily switches text-overflow to 'clip' */
}

Contenteditable rich text field

<div
  contenteditable="true"
  style="
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
  "
>
  A very long filename or title that might be truncated at rest
</div>

<!-- Chrome 149: when the user clicks in to edit, the ellipsis
     disappears and the full text is visible. When focus leaves,
     the ellipsis returns. -->

compatibility notes

Form controls (input, textarea)	Already behaved this way before Chrome 149. No change.
Display-only elements (no focus, no editing)	Unaffected. Ellipsis is always shown when the element is not being interacted with.
Firefox	Implements this behaviour per spec for form controls; non-form behaviour may vary.
Safari	Implements this behaviour for form controls.

browser support

Chrome	149 — all elements (form controls since earlier)
Edge	149 (Chromium)
Firefox	Partial (form controls only per MDN)
Safari	Partial (form controls only)

Source: chromestatus browser views, May 2026.