Clip Text overflow on user interaction

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. Overflow Text Editor

   Gallery of realistic truncated fields — file paths, URLs, commit messages, CSS selectors — with an adjustable container-width slider. Click any field to reveal and edit the full content, demonstrating the zero-JS behaviour across diverse content types.

4. Data Table

   A deployment log table with truncated path/message and commit-hash columns. Click any row to expand — full content appears across all cells simultaneously. Toggle the auto-expand checkbox to compare the locked-truncated state and see the exact CSS behind it.

5. Compatibility Lab

   Probes the CSS-only clip-on-focus behaviour via live DOM injection. Side-by-side: native :focus { overflow: auto; text-overflow: clip; } versus a JavaScript focus/blur event handler adding an .expanded class. Provides the exact @supports guard and a portable fallback function.

why it shipped

Before Chrome 148, 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 148 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

• ChromeStatus entry
• Chrome 148 release notes
• CSS Overflow Level 4 spec — text-overflow