v148 · CSS · UX

Inline Tag Editor

Tags and label chips are a common pattern where each chip is clipped with text-overflow: ellipsis to fit in a tight row. Chrome 148 makes the browser automatically reveal the full text when you click or focus into a chip — no JavaScript required. Click any chip below to see the text expand for editing, then blur to restore the ellipsis.

Tag editor

Click a tag chip to edit its full text — Chrome 148 clips automatically on focus.

Sample tags:

Edge cases and support

Checking CSS support...

Try:

CSS parse checking

Overflowing chips checking

Active target none

Non-form focus targets:

repository-wide-generated-critique-queue release-notes-triage-owner-review css-overflow-level-three-ellipsis-interaction

Click a tag chip: Chrome 148 automatically switches text-overflow from ellipsis to clip while the user is editing, selecting, or navigating the clipped text. The same CSS is applied to the non-form chips above so older browsers still show a stable clipped fallback instead of a broken layout.

/* Chrome 148: automatic clip-on-focus for text-overflow: ellipsis */

/* The only CSS needed — browser handles focus/blur automatically */
.tag-input {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Chrome 148: on focus → clips; on blur → restores ellipsis */
}

  /* Before Chrome 148 you needed JavaScript: */
  /* input.addEventListener('focus', () => input.style.textOverflow = 'clip'); */
  /* input.addEventListener('blur',  () => input.style.textOverflow = 'ellipsis'); */

Inline Tag Editor

Edge cases and support

see also

references