Angular mat-button-toggle-group如何限制显示字符数并添加提示

完全可以实现，以下是三种可直接落地的实现方式，核心逻辑都是截断显示文本+绑定悬浮提示展示完整内容：

方式1：模板内直接处理（零额外代码，快速上线） #

利用Angular内置的slice管道做文本截断，配合Angular Material自带的matTooltip指令做悬浮提示，直接修改component.html即可：

<mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedValue">
  <mat-button-toggle  
    *ngFor="let item of toggleOptions;" 
    (change)="onChange($event)" 
    [value]="item"
    [matTooltip]="item"
  >
    {{ item.length > 10 ? (item | slice:0:10) + '...' : item }}
  </mat-button-toggle>
</mat-button-toggle-group>

注意：使用matTooltip需要先在当前业务模块导入MatTooltipModule，导入路径为@angular/material/tooltip。

方式2：自定义截断管道（多场景复用） #

如果项目中多处需要做文本截断，可封装通用管道避免重复写判断逻辑：

1. 执行命令生成管道：ng generate pipe truncate
2. 修改管道逻辑：

// truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 10, suffix = '...'): string {
    if (!value) return '';
    return value.length > limit ? value.slice(0, limit) + suffix : value;
  }
}

3. 模板中直接调用管道，代码更简洁：

<mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedValue">
  <mat-button-toggle  
    *ngFor="let item of toggleOptions;" 
    (change)="onChange($event)" 
    [value]="item"
    [matTooltip]="item"
  >
    {{ item | truncate:10 }}
  </mat-button-toggle>
</mat-button-toggle-group>

方式3：纯CSS截断（显示效果更自然） #

硬编码字符数截断可能因为中英文字符、数字的宽度差异导致显示错位，用CSS实现溢出省略可以适配固定宽度的按钮，效果更统一：

1. 模板中给显示文本加包裹层：

<mat-button-toggle  
  *ngFor="let item of toggleOptions;" 
  (change)="onChange($event)" 
  [value]="item"
  [matTooltip]="item"
>
  <span class="toggle-label">{{ item }}</span>
</mat-button-toggle>

2. 编写对应样式：

.toggle-label {
  display: inline-block;
  max-width: 75px; /* 按实际需求调整，约等于10个常规字符宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

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