v148 · CSS · UX · demo

Live Edit

Three real-world patterns — single-line input, contenteditable, and a URL-bar lookalike — all using the same CSS-only approach that Chrome 148 handles automatically.

Focus a field to inspect the ellipsis interaction state.

1. Single-line <input>

Click the input → full address visible. Click away → ellipsis returns.

2. contenteditable div

An extremely long piece of editorial copy that overflows the container and is clipped with an ellipsis until the user interacts with it to read or edit.

Click to edit → full text revealed. Click away → truncated again.

3. URL bar pattern

https://

Focus the bar → full URL visible for editing. Blur → scheme + truncated path.

/* The entire CSS required — Chrome 148 handles the rest */
.field {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* No JS needed:
   - focus/click → browser clips the text (reveals full content)
   - blur        → browser restores the ellipsis                 */

see also

references