Angular Material 18: Chip text with overflow

Question

I would like the text inside my chips to display ... when it is too long. Currently and by default, I have this chip without overflow ellipsis

But I want it to look like this : chip with overflow ellipsis

I tried this in my component level

    :host ::ng-deep .mat-mdc-chip-set-stacked .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;
    }

but this only works for angular 16, but not for angular 17/18.

Answer 1

Instead of writing the css in component using ::ng-deep as it is being deprecated, its better to use in styles.css

I have tried for this example https://material.angular.io/components/chips/examples#chips-autocomplete

Below is the css for the mat-chip-row , apply it in the styles.css

//properties need to be applied in styles.css
.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.mdc-evolution-chip__action.mat-mdc-chip-action.mdc-evolution-chip__cell.mdc-evolution-chip__cell--primary.mdc-evolution-chip__action--primary {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

The above is working for the angular 18 . Below is the working example for the text inside the chips to display ... when it is too long.

output of the above example

Answer 2

Solved: wrap the text inside a block like div

<mat-chip-option>
  <div class="container">
    {{ label }}
  </div>
  <button>
    <mat-icon>cancel</mat-icon>
  </button>
</mat-chip-option>

and add the following css

mat-chip-option .container {
   display: block;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}