Angular Material 16: Chip text with overflow

Question

I have in some texts of a Chip some very long texts. I have as well a button on the end of the chip to remove the chip.

I thought I can apply text-overflow: ellipsis for the text but somehow this doesn't help.

Currently it looks in my sample like

but I want to have look like

Answer 1

Setting a fixed width was not an option for me as the interface needed to be fluid.

So I did some digging into the source code and found that the chip text label already has the CSS rules needed for truncating text, but this behaviour is overwritten for some reason

(the details and code references are below the solution):

---

Solution

As a workaround, we have to overwrite the rules, by the following css provided at:

a) at component level:

:host ::ng-deep .mdc-evolution-chip-set__chips {
  max-width: 100%;
}

:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label {
  overflow: hidden;
}

Example - Parent container that takes all the screen width: https://stackblitz.com/edit/tc5xcb-fvpbyu

Example - Parent container with fixed width: https://stackblitz.com/edit/tc5xcb-yfytxs

OR

b) in global styles.css file:

.mdc-evolution-chip-set__chips {
  max-width: 100% !important;
}

.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
.mat-mdc-standard-chip .mat-mdc-chip-action-label {
  overflow: hidden !important;
}

Example: https://stackblitz.com/edit/tc5xcb-jrdkjw

---

Details

.mdc-evolution-chip__text-label {
  white-space: nowrap;
  user-select: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

(the code is in https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-chips/_chip.scss#L215):

But the behaviour is overwritten in Angular Material source code (v16.0.2), https://github.com/angular/components/blob/16.0.2/src/material/chips/chip.scss#L131:

// MDC sets `overflow: hidden` on these elements in order to truncate the text. This is
// unnecessary since our chips don't truncate their text and it makes it difficult to style
// the strong focus indicators so we need to override it.

.mdc-evolution-chip__cell--primary,
.mdc-evolution-chip__action--primary,
.mat-mdc-chip-action-label {
  overflow: visible;
}

---

There is also an issue opened on Github - https://github.com/angular/components/issues/26584.

I will follow up on this and update the answer accordingly when the issue gets resolved.

Answer 2

Ellipsis works if:

• the element's width is set in px and
• the element has overflow: hidden; and white-space: nowrap;.

See the live demo.

HTML:

<div class='sample-list'>
   <mat-chip-listbox aria-label="Fish selection">
      <mat-chip-option>
         <div class="clip-text">
            Just one fish with some very very long tail
         </div>
         <button matChipRemove>
            <mat-icon>close</mat-icon>
         </button>
      </mat-chip-option>
   </mat-chip-listbox>
</div>

CSS:

.sample-list {
  background-color: aqua;
  width: 205px;
}

.clip-text {
  width: 159px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Output: