Angular Material 16：Chip组件文本溢出处理求助

针对带删除按钮的Chip文本过长，text-overflow: ellipsis未生效的问题，核心是调整Chip内部的flex布局优先级，让文本容器能占据剩余空间并限制溢出：

• 给目标Chip设置最大宽度（或固定宽度），确保布局有明确边界
• 调整文本容器的flex属性，让它填充删除按钮外的剩余空间，同时开启溢出省略规则

具体实现代码 #

组件样式（CSS/SCSS）

/* 自定义Chip样式，控制最大宽度 */
.limited-chip {
  max-width: 220px; /* 根据业务需求调整宽度 */
  display: flex;
  align-items: center;
}

/* 配置文本容器的溢出规则 */
.limited-chip .mat-chip-text {
  flex: 1; /* 占据除删除按钮外的所有剩余空间 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 6px; /* 给删除按钮预留间距，避免紧贴文本 */
}

模板HTML

<mat-chip-listbox>
  <mat-chip 
    class="limited-chip" 
    removable 
    (removed)="removeChip(item)"
  >
    {{ item.longText }}
    <button matChipRemove>
      <mat-icon>close</mat-icon>
    </button>
  </mat-chip>
</mat-chip-listbox>

原理说明 #

Angular Material的Chip默认采用flex布局，.mat-chip-text默认未设置flex:1，导致它会优先扩展宽度挤压删除按钮，而非限制自身溢出。通过给文本容器添加flex:1，让它占据剩余空间，再配合溢出属性，就能实现文本过长时自动省略，同时保留删除按钮的固定位置。

内容的提问来源于stack exchange，提问作者LeO