实际的芯片文字会被换行，而不是扩展芯片

Question

我正在使用角形材料8.2.3，当我在芯片中设置文本时，文本会被包裹并弄乱。我想要的是将芯片扩展为在一行中填充所有文本

这怎么可能？代码是：

<mat-form-field style="margin-left:20px" *ngIf="filterStatus">
    <mat-chip-list>
        <mat-chip color="warn" removable (removed)="removeFilter()" selected>
            Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
            <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>
</mat-form-field>   

Answer 1

芯片是否太宽而无法容纳在其容纳容器中？

检查我做的这个例子。它重现了您的问题：https://stackblitz.com/edit/angular-p2hwr9

<h3>Chip list with container width set</h3>
<div style="width:150px">
  <mat-chip-list>
    <mat-chip color="warn" removable (removed)="removeFilter()" selected>
      Filter view on {{dateFrom | date:'yyyy:MM:dd'}} - This is a sample view
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
</div>

<h3>Chip list without container width set</h3>
<mat-chip-list>
    <mat-chip color="warn" removable (removed)="removeFilter()" selected>
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}} - This is a sample view
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>