v148 · CSS · UX

Overflow Reveal Animator

Text cards with text-overflow: ellipsis expose their hidden content during real focus and selection interaction. Control duration, clip width, card count, and content type, then compare Chrome's native focus behaviour with a JavaScript-driven expansion fallback.

In Chrome 148, text-overflow: ellipsis is rendered like clip while the user edits, selects, or navigates clipped text. The CSS-native tab keeps the authored CSS at text-overflow: ellipsis and lets the browser handle the interaction.
400ms
200px
6
Expand mode:
Computed CSS for selected card:
Click a card to inspect its computed styles.
Focus a card to inspect the ellipsis interaction state.

Performance: CSS vs JS expand cost

Measures time from expand trigger to paint-ready. Click each button to run the micro-benchmark (5 iterations).

CSS
—
JS
—

how it works

.card-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: max-width 0.4s ease;
}

/* Chrome 148 changes the focused rendering automatically.
   Computed text-overflow remains ellipsis; no focus override is required. */

references