demo · v149
Overflow Direction Tester
Chrome 149's clip-on-interaction fix applies to all writing directions. Test LTR overflow from the right, RTL overflow from the left, and bidirectional text — in each case the ellipsis disappears when the input receives focus, revealing the full content for editing.
Click or Tab into each field below. When focused, Chrome 149 clips instead of showing the ellipsis — so you see the actual text content regardless of text direction. Blur the field (Tab away or click outside) and the ellipsis returns.
Field width:
160px
Font size:
Full-width URL bar — long URL with query parameters
Focus to see the full URL; blur to see the ellipsis at the right edge (LTR).
RTL URL bar (Arabic domain example)
Focus to see the full RTL text; blur for ellipsis at left edge.
/* No CSS change needed — Chrome 149 changes the behaviour */
input {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
/* direction: rtl; — works the same way */
}
/*
Unfocused (LTR): "Very long text content that overflows the fi…"
Focused (LTR): "Very long text content that overflows the field"
Unfocused (RTL): "…نص عربي طويل جداً يتجاوز حدود الحقل"
Focused (RTL): "نص عربي طويل جداً يتجاوز حدود الحقل"
*/see also
- Interaction Demo — basic clip-on-interaction
- Before/After Compare — old vs Chrome 149 behaviour
- Field Types Test — all input types
- ChromeStatus: Clip text-overflow on user interaction
- MDN — text-overflow
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗