v147 · CSS · UX · demo

Live Edit

Focus real single-line inputs, a contenteditable field, and a URL-bar pattern. The live inspector reports focus, selection, computed text-overflow, overflow dimensions, direction, and the line-clamp boundary so the interaction is visible instead of described as a static code card.

1. Single-line input

Focus or select text. CSSOM remains text-overflow: ellipsis; the focused visual state is the browser interaction behavior.

2. contenteditable region

editable copy

Focus, edit, or select inside the overflowing single-line region.

3. URL bar pattern

https://

The scheme stays fixed while the path exercises the same single-line overflow behavior.

active elementnone
computed styletext-overflow: ellipsis
overflow metrics0 / 0
selectionnone
directionauto
visual checkfocus a field

multi-line boundary

text-overflow is a single-line overflow feature. A clamped multi-line paragraph uses -webkit-line-clamp, so it is shown as a separate boundary instead of being counted as the same user-interaction behavior.

.field {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Chrome 147 interaction path:
   focus, selection, or editing lets users inspect the clipped text.
   The authored CSS remains text-overflow: ellipsis. */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗