diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss index 54d95949b3..de1037d829 100644 --- a/chips/internal/_shared.scss +++ b/chips/internal/_shared.scss @@ -22,6 +22,7 @@ height: var(--_container-height); cursor: pointer; -webkit-tap-highlight-color: transparent; + max-width: 100%; @include ripple.theme( ( @@ -96,6 +97,9 @@ } .primary.action { + // Set a min-width on the primary action so that trailing actions remain + // inside the chip as the chip is resized. + min-width: 0; padding-inline-start: var(--_leading-space); padding-inline-end: var(--_trailing-space); } @@ -151,11 +155,16 @@ display: flex; font-family: var(--_label-text-font); font-size: var(--_label-text-size); - line-height: var(--_label-text-line-height); font-weight: var(--_label-text-weight); height: 100%; - text-overflow: ellipsis; + line-height: var(--_label-text-line-height); + overflow: hidden; user-select: none; + } + + .label-text { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts index ae71a92ada..746034437e 100644 --- a/chips/internal/chip.ts +++ b/chips/internal/chip.ts @@ -129,7 +129,9 @@ export abstract class Chip extends LitElement { - ${this.label} + + ${this.label} + `; } diff --git a/testing/table/internal/test-table.ts b/testing/table/internal/test-table.ts index 8717dd660e..75e1fc72b7 100644 --- a/testing/table/internal/test-table.ts +++ b/testing/table/internal/test-table.ts @@ -82,7 +82,7 @@ export class TestTable extends LitElement { ${this.states.map( (state, colIndex) => html` - +
N/A