v149 · CSS · Editing Scenarios

Editing Scenarios

Different field types and configurations demonstrating clip-on-interaction behaviour. Focus any field to see the ellipsis switch to clip, revealing the full content for editing.

Most fields below use text-overflow: ellipsis; overflow: hidden; white-space: nowrap;. The custom-marker examples include support readouts because older browsers may fall back to a plain ellipsis. Chrome 149+ switches ellipsis-style overflow to clip on focus automatically.

Keyboard check: focus any field, press End to move into the hidden tail, then use ArrowLeft and ArrowRight. The guide reports caret position, selection, and whether the field has scrolled into clipped content.

Caret guide: no field focused yet.

field types

Standard text input

Basic scenario — long value truncated at right edge.

Focus to reveal full path

Baseline: static clip

This field uses text-overflow: clip all the time, so it has no idle ellipsis to remove on focus.

Compare this with the ellipsis fields: focus and press End

Password field

Even masked fields can overflow — focus reveals the full (masked) length.

Focus to see full length (still masked)

RTL text (direction: rtl)

Right-to-left text truncates at the left edge. Focus reveals the full content.

Focus to reveal full RTL text

Readonly input

Readonly fields still support caret navigation in Chrome 149+, so clip applies on focus.

Focus to see/select full readonly value

Custom marker string

A single string marker replaces the default ellipsis while the value is idle.

text-overflow: " more"; checking support…

Two-value marker

The left and right edges can use different overflow markers; focus should still expose editable text.

text-overflow: ellipsis " more"; checking support…

why this matters for UX

/* Common pattern: show truncated URLs or paths in fixed-width inputs */
.url-field {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 240px;
}

/* Before Chrome 149: focusing the field kept the ellipsis.
   The user had to select-all to see the full URL.

   Chrome 149+: on focus, ellipsis switches to clip automatically.
   The caret lands at the visible position in the full text.
   The user can see where they clicked and edit normally. */

.two-value-field {
  text-overflow: ellipsis " more";
}

implementation reference

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