How to show ellipsis on mat-chip-list when more chips are present

Question

I am creating a multiselect list with mat-chip-list as shown below.

   <div class="divclass">
      <mat-form-field>
        <mat-label>Names</mat-label>
        <mat-select formControlName="names" name="names" multiple (selectionChange)="namechange($event.value)">
          <mat-select-trigger>
            <mat-chip-list>
              <mat-chip *ngFor="let name of selectednameList" removable (removed)="removename(name)">
                {{ name }}
                <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
            </mat-chip-list>
          </mat-select-trigger>
          <mat-option *ngFor="let name of nameList; [value]="name">
            {{ name }}
          </mat-option>
        </mat-select>
        <mat-icon matSuffix>keyboard_arrow_down</mat-icon>
      </mat-form-field>
    </div>

I am restricting the height of chip list as shown below in css because I don't want to auto size the chip list when more chips are there.

::ng-deep .mat-chip-list-wrapper {
  height: 3rem; 
  overflow: hidden;
}

But I want to show some indication like ellipsis or show additional number of chips present like a +2 or any other way to the user to indicate that more items are present at the end of first line chips. Something similar to overflow ellipsis for text overflow.

I am not able to find out a way to do this. I looking something similar to these.

I did not find a useful code to achieve this.