垫标签文本溢出省略号不起作用，因此垫图标覆盖垫标签

问：

下面是 HTML 代码

<mat-form-field [style.width.%]="'50'">
    <mat-icon matIconPrefix>search</mat-icon>
    <mat-label>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua.
    </mat-label>
    <button mat-icon-button matIconSuffix (click)="clearFilters()" matTooltip="Clear filter">
        <mat-icon>close</mat-icon>
    </button>
    <mat-chip-grid #chipList>
        <mat-chip-row *ngFor="let condition of filterConditions" (removed)="remove(condition)">
            {{condition.field ? condition.field + ' = ' + condition.value : condition.value}}
            <button matChipRemove>
                <mat-icon>cancel</mat-icon>
            </button>
        </mat-chip-row>
        <input #filterInput [formControl]="filterCtrl" [matChipInputFor]="chipList" [matAutocomplete]="auto"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)">
    </mat-chip-grid>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
        <mat-option disabled class="loading" *ngIf="loading">
            <mat-spinner diameter="35"></mat-spinner>
        </mat-option>
        <mat-option *ngFor="let condition of filteredFilters | async" [value]="condition.value" [disabled]="loading">
            {{condition.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

这是当前输出

我希望在更改窗口大小后，垫子标签会用省略号溢出，因此垫子图标不应覆盖垫子标签。