v147 · css · in developer trial
Clip Text overflow on user interaction
When a user clicks into, edits, or navigates by caret inside an element styled with text-overflow: ellipsis, the browser temporarily switches the overflow rendering to clip — revealing the hidden content while the user is interacting and restoring the ellipsis when they leave.
chrome://flags/#enable-experimental-web-platform-features to test it. The behavior is still under development and the spec is not yet finalised for this interaction model.
at a glance
| Status in Chrome 147 | In developer trial (behind a flag) |
|---|---|
| Flag | chrome://flags/#enable-experimental-web-platform-features |
| Applies to | All elements with text-overflow: ellipsis — editable and non-editable. Form controls already had this behavior; this extends it universally. |
| Standards position | Firefox: Shipped/Shipping · Safari: No signal |
| Spec | CSS Overflow Module Level 3 §ellipsis-interaction |
| Chromium bug | issues.chromium.org/issues/40731275 |
| ChromeStatus | 5146265241387008 — Clip Text overflow on user interaction |
why it exists
Developers have long used text-overflow: ellipsis to truncate long labels and headings in constrained layouts. The problem is that once a user focuses or clicks into an ellipsis-clipped element — a contenteditable title, a long filename in a table cell, or an inline-editing widget — the truncated content is hidden and the user cannot reach or read the overflowing characters. <input> and <textarea> already handle this by scrolling or switching to clip mode on focus; this feature brings the same affordance to all elements.
the behavior
No new CSS property or JavaScript API. The change is purely in the rendering model:
| Trigger | User interaction begins on the element — a click, focus, caret navigation, or text selection. |
|---|---|
| While active | The browser renders overflow as clip (or scrollable, depending on the overflow property). The ellipsis character disappears and the user can see and interact with the full text content. |
| On blur / end of interaction | The ellipsis is restored and overflow truncation resumes. |
| Form controls | Already implement this model. The feature extends it to arbitrary elements. |
example
The element below uses text-overflow: ellipsis. In a browser with this feature, clicking or focusing on it would reveal the full text.
The quick brown fox jumped over the lazy dog, then kept running for a very long time
/* No special CSS needed — existing text-overflow: ellipsis benefits automatically. */
.filename {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
/* To make an element interactable so the behavior triggers: */
.filename[contenteditable] {
cursor: text;
outline: none;
}browser support
| Browser | Support |
|---|---|
| Chrome 147 | In developer trial (behind flag) |
| Edge 147 | Tracking Chromium |
| Firefox | Shipped/Shipping |
| Safari | No signal |