在mat-chip-list中使用ngFor循环生成角料时,可以通过CSS样式来防止角料断行。以下是一个示例的解决方案:
.mat-chip-list {
display: flex;
flex-wrap: wrap;
}
.mat-chip {
width: 150px; /* 根据实际情况调整宽度 */
flex-shrink: 0;
}
<mat-chip-list>
<mat-chip *ngFor="let chip of chips" class="custom-chip">{{ chip }}</mat-chip>
</mat-chip-list>
.custom-chip {
width: 150px; /* 根据实际情况调整宽度 */
flex-shrink: 0;
}
通过上述方法,可以有效防止mat-chip-list中角料的断行现象,使角料在一行内紧凑显示。当角料的宽度超过容器宽度时,会自动换行显示。
关于腾讯云相关产品和产品介绍链接,根据问题的描述,并没有明确指定需要提及腾讯云的相关内容,因此在此不提供腾讯云相关信息。
领取专属 10元无门槛券
手把手带您无忧上云