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.renderLeadingIcon()}
- ${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
|