如何让mat-select-trigger不显示省略号且内容不隐藏（多选场景）

问题说明 #

在Angular Material的多选mat-select组件中，选中内容默认会被截断并显示省略号，自定义SCSS后内容仍出现换行问题，需要实现不显示省略号、选中内容完全展示的效果。

解决方案 #

1. 修正自定义SCSS样式 #

覆盖Angular Material的默认截断样式，确保容器自适应内容高度，同时让选中标签可正常换行：

/* 覆盖mat-select的默认截断逻辑 */
mat-form-field.mat-form-field {
  mat-select.mat-select {
    .mat-select-value {
      display: block !important;
      max-width: unset !important;
      width: 100%;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }

    .mat-select-value-text {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem; /* 给选中标签添加间距 */
    }
  }
}

/* 让表单域高度自适应内容 */
mat-form-field.mat-form-field.appearance-fill .mat-form-field-flex {
  flex-wrap: wrap;
  align-items: flex-start;
}

2. 优化HTML结构 #

移除不必要的fxLayout属性，避免布局冲突，确保触发器容器正确包裹选中标签：

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      <ng-container *ngFor="let dato of toppings.value; let i = index">
        <span class="badge rounded-pill bg-primary" (click)="eliminar(i)">{{ dato }}</span>
      </ng-container>
    </mat-select-trigger>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{ topping }}</mat-option>
  </mat-select>
</mat-form-field>

3. 完善TS逻辑（可选） #

确保移除选中项的方法正确触发控件变更：

import { FormControl } from '@angular/forms';

// ...

toppings = new FormControl([]); // 初始化为空数组，匹配多选控件类型
toppingList: string[] = new Array(100).fill(null).map((x, i: number) => `${i} Paso ${Math.random()}`);

eliminar(index: number): void {
  const currentValues = this.toppings.value || [];
  currentValues.splice(index, 1);
  this.toppings.setValue([...currentValues]); // 触发变更检测更新视图
}

核心原理 #

• 用!important强制覆盖Angular Material的内联默认样式，取消max-width限制，将overflow设为visible、text-overflow设为clip，彻底禁用省略号。
• 通过flex-wrap: wrap让选中标签自动换行排列，同时调整表单域布局使其高度自适应内容，避免内容被遮挡。

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