v148 · 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.
Waiting for a task interaction.

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

references