v147 · CSS · UX · demo

Truncated List

Click any task to focus it. Chrome 148 automatically reveals the full text on interaction — no JavaScript needed. Blur to see the ellipsis return.

↓ Click a task item to focus it. The ellipsis disappears and the full text is revealed. Click elsewhere to blur and see the ellipsis return.

Before Chrome 148

Ellipsis stayed visible even while editing. Developers had to toggle text-overflow in JS focus/blur handlers.

Chrome 148+

Browser automatically clips on focus/interaction and restores the ellipsis on blur. Zero JavaScript required.

/* That's all you need — no JS */
.task-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Chrome 148: clips automatically on focus,
   restores ellipsis on blur */

see also

implementation reference

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