Angular Material 18 实现芯片文本过长时显示省略号

我太懂你现在的困扰了——之前在Angular 16里好好用的芯片文本溢出省略样式，到了17/18版本突然就失效了对吧？别慌，这是因为Angular Material 17+更新了底层的MDC组件结构，原来的CSS选择器已经不匹配新的元素类名了，咱们调整下样式就能搞定~

你可以把下面的代码加到组件的样式文件里试试：

/* 先给芯片组设置最大宽度，避免它无限制拉伸 */
:host ::ng-deep .mat-mdc-chip-set {
  max-width: 100%;
}

/* 给单个芯片设置溢出隐藏，防止内容撑破容器 */
:host ::ng-deep .mat-mdc-standard-chip {
  max-width: 100%;
  overflow: hidden;
}

/* 关键：针对新版本的文本标签类，配置省略号效果 */
:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果你的芯片是堆叠布局（stacked），还可以额外加这段样式，确保堆叠的芯片组也能正确限制宽度：

:host ::ng-deep .mat-mdc-chip-set-stacked .mdc-evolution-chip-set__chips {
  max-width: 100%;
}

至于原来的样式为啥没用，其实是因为Angular 17+把芯片文本的容器类名从mat-mdc-chip-action-label改成了mdc-evolution-chip__text-label，之前的选择器找不到对应的元素，自然没效果。替换成新的类名后，过长的文本就会自动显示...啦。

备注：内容来源于stack exchange，提问作者jean joel Ntepp