mirror of
https://github.com/material-components/material-web.git
synced 2024-10-05 17:48:16 +03:00
fix(chips): add truncation support
PiperOrigin-RevId: 649094591
This commit is contained in:
parent
d23ea847f5
commit
713f0a80fc
@ -96,6 +96,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.primary.action {
|
.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-start: var(--_leading-space);
|
||||||
padding-inline-end: var(--_trailing-space);
|
padding-inline-end: var(--_trailing-space);
|
||||||
}
|
}
|
||||||
@ -151,11 +154,21 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
font-family: var(--_label-text-font);
|
font-family: var(--_label-text-font);
|
||||||
font-size: var(--_label-text-size);
|
font-size: var(--_label-text-size);
|
||||||
line-height: var(--_label-text-line-height);
|
|
||||||
font-weight: var(--_label-text-weight);
|
font-weight: var(--_label-text-weight);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-overflow: ellipsis;
|
line-height: var(--_label-text-line-height);
|
||||||
|
overflow: hidden;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// An inner span is needed to truncate the label, since elements with a flex
|
||||||
|
// display do not support the text-overflow property. The outer wrapper .label
|
||||||
|
// needs to be a flex display to correctly set the element's baseline,
|
||||||
|
// supporting external elements aligning to the baseline of the chip's text
|
||||||
|
// instead of its edges or icons.
|
||||||
|
.label-text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,7 +128,9 @@ export abstract class Chip extends chipBaseClass {
|
|||||||
<span class="leading icon" aria-hidden="true">
|
<span class="leading icon" aria-hidden="true">
|
||||||
${this.renderLeadingIcon()}
|
${this.renderLeadingIcon()}
|
||||||
</span>
|
</span>
|
||||||
<span class="label">${this.label}</span>
|
<span class="label">
|
||||||
|
<span class="label-text">${this.label}</span>
|
||||||
|
</span>
|
||||||
<span class="touch"></span>
|
<span class="touch"></span>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user