材料芯片文本被包装，而不是扩展芯片。

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>