v148 · CSS · text-overflow
Editable Cell Grid
A spreadsheet-style grid where every cell's content is truncated with an ellipsis until you click — Chrome 148 then automatically clips to show the full content for editing. Tab between cells to see the transition in action.
How to use: Click or Tab into any cell below. In Chrome 148+ the ellipsis disappears on focus, revealing the full text. Edit the content, then Tab away — the ellipsis returns if the text is still too long.
Active cell: none — click any cell to focus it
Click a cell to inspect the ellipsis interaction state.
| Name | Job Title | Notes |
|---|
How it works
/* All you need — no JavaScript for the clip-on-focus behaviour */
.cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Chrome 148 auto-clips on focus — full content visible for editing */
.cell:focus {
/* text-overflow: clip is now implicit when focused */
outline: 2px solid var(--accent-blue);
}