v147 · CSS

Compatibility Lab

Check the exact text-overflow: ellipsis and text-overflow: clip surfaces, then compare a CSS-only field with a JavaScript fallback. Focus, select, change direction, and narrow the field to inspect what the browser can expose programmatically.

Feature contract

Live comparison

sample text field width 280px fallback handler

CSS-only native path

single-line editable text

JavaScript fallback path

same content with focus/blur class

active surfacenone

computed text-overflowellipsis

overflow size0 / 0

selectionnone

visual contractfocus a field

fallback stateenabled

Line-clamp boundary

The user-interaction behavior is for single-line text-overflow. A multi-line clamp uses a different mechanism, so the page keeps it as an explicit boundary case instead of calling it supported by the same probe.

This multi-line paragraph is intentionally long enough to clamp after two lines. Focusing the single-line fields above exercises text-overflow; this block demonstrates why line-clamp needs a separate pattern.

Fallback pattern

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

/* Native path: no authored text-overflow change is needed.
   Chrome paints the focused/selected ellipsis run as clipped. */

/* Fallback path for browsers without that visual behavior. */
.field.expanded {
  overflow: auto;
  text-overflow: clip;
}

implementation reference

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