Angular11中PrimeNG MultiSelect组件长选项标签如何截断？

以下两种实现方式都兼容Angular 11 + PrimeNG对应版本的环境：

方案1：自定义模板 + 截断管道（推荐，可控性高） #

通过PrimeNG提供的模板插槽自定义选中态chip和下拉选项的渲染逻辑，按字符数控制截断长度，同时支持悬停显示完整文本。

1. 首先创建全局文本截断管道
   执行命令生成管道：ng generate pipe truncate，管道代码如下：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  /**
   * @param value 原始文本
   * @param maxLength 最大显示字符数，默认10
   */
  transform(value: string, maxLength: number = 10): string {
    if (!value) return '';
    return value.length > maxLength ? `${value.slice(0, maxLength)}...` : value;
  }
}

注意：创建完成后需要在当前组件所属NgModule的declarations数组中注册该管道，否则无法在模板中使用

2. 调整MultiSelect组件代码，添加自定义模板

<p-multiSelect
    #multiSelect
    [options]="options"
    [(ngModel)]="values"
    optionLabel="name"
    dropdownIcon="fas fa-caret-down"
    (onChange)="onValueChange()"
    [placeholder]="placeholderText"
    display="chip"
    [optionValue]="_config?.optionValue"
    [disabled]="disabled || readonly"
>
  <!-- 自定义选中后的chip模板，这里设置最大显示12个字符 -->
  <ng-template pTemplate="chip" let-chip>
    <p-chip [label]="chip.name | truncate:12" [tooltip]="chip.name"></p-chip>
  </ng-template>
  <!-- 可选：下拉列表内的选项也做截断处理，最大显示15个字符 -->
  <ng-template pTemplate="item" let-item>
    <span [title]="item.name">{{ item.name | truncate:15 }}</span>
  </ng-template>
</p-multiSelect>

方案2：纯CSS样式控制（无需修改业务逻辑） #

如果不需要按字符数截断，只需要按显示宽度限制，直接通过CSS样式强制截断即可。

1. 给MultiSelect组件添加自定义类名

<p-multiSelect
    #multiSelect
    class="multi-select-truncate"
    [options]="options"
    [(ngModel)]="values"
    optionLabel="name"
    dropdownIcon="fas fa-caret-down"
    (onChange)="onValueChange()"
    [placeholder]="placeholderText"
    display="chip"
    [optionValue]="_config?.optionValue"
    [disabled]="disabled || readonly"
></p-multiSelect>

2. 添加对应样式
   如果写在组件的样式文件中需要加::ng-deep，如果是全局样式可以省略该前缀：

/* 截断选中态chip文本 */
.multi-select-truncate ::ng-deep .p-chip .p-chip-text {
  max-width: 80px; /* 可根据UI需求调整宽度阈值 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 截断下拉列表选项文本 */
.multi-select-truncate ::ng-deep .p-multiselect-item .p-multiselect-item-label {
  max-width: 150px; /* 可根据UI需求调整宽度阈值 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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