DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chips): ellipse label text when overflowing

Browse Source
This commit is contained in:
Nino Peters 2024-06-06 12:07:08 +02:00
parent 17aa21a53e
commit 2b4bb92b47
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
chips/internal/_shared.scss
View File

@ -14,6 +14,7 @@
@mixin styles() {
:host {
overflow: hidden;
border-start-start-radius: var(--_container-shape-start-start);
border-start-end-radius: var(--_container-shape-start-end);
border-end-start-radius: var(--_container-shape-end-start);
@ -78,6 +79,12 @@
pointer-events: none;
}
.container.has-icon {
.label-container {
width: calc(100% - var(--_icon-size) - var(--_with-leading-icon-leading-space));
}
}
.cell {
display: flex;
}
@ -145,17 +152,23 @@
z-index: 1;
}
.label {
align-items: center;
color: var(--_label-text-color);
.label-container {
display: flex;
align-items: center;
user-select: none;
height: 100%;
width: 100%;;
}
.label {
display: inline-block;
color: var(--_label-text-color);
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%;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
white-space: nowrap;
}
@ -226,6 +239,8 @@
button {
// Override the user-agent text-transform: none of <button> and <a>
text-transform: inherit;
width: 100%;
box-sizing: border-box;
}
a,

4
chips/internal/chip.ts
View File

@ -129,7 +129,9 @@ export abstract class Chip extends LitElement {
<span class="leading icon" aria-hidden="true">
${this.renderLeadingIcon()}
</span>
<span class="label">${this.label}</span>
<div class="label-container">
<span class="label">${this.label}</span>
</div>
<span class="touch"></span>
`;
}