v147 · CSS · Accessibility · demo
Data Table
A deployment log table with truncated cells. Click any row to focus it — the long columns expand automatically to show full paths, error messages, and commit hashes, all without JavaScript. This is the text-overflow: clip on user interaction behaviour in a real data table context.
Chrome 147+ —
overflow: hidden text is automatically revealed when the element (or an ancestor in the focus chain) receives focus. The expansion is driven by the browser via the CSS :focus-within cascade, with no JavaScript required.
Click any row to expand truncated cells · Tab through rows to navigate · use "Toggle auto-expand" to compare with the locked-truncated state
Click a row to see its full details here
| Status | Service | Path / Message | Commit | Duration |
|---|
/* Clip text overflow on user interaction — Chrome 147 */
/* Default: truncated cell */
td.path-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
/* Chrome 147: auto-removes overflow clip when the row is focused */
/* The :focus-within selector is what the browser uses internally */
tr:focus-within td.path-cell {
white-space: normal;
overflow: visible;
}
/* Zero JavaScript. Just make the row (or cell) focusable: */
/* and it works for keyboard and click users */
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗