如何在Angular Mat Menu中显示完整文本或换行菜单项

当菜单项文本为类似“AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA”的超长无空格文本时，Mat Menu会自动将文本截断显示为省略号，希望能显示完整文本或实现断词换行，尝试过多种CSS方法无效，求解决方案。

<mat-menu #reportsMenu="matMenu" class="main-menu reports-mat-menu-panel-customized">
            <ng-container *ngFor="let reportsMenuItem of REPORTS_MENU">
              <button [disabled]="!isAdmin && reportsMenuItem.isOnlyAdminAccess" mat-menu-item *ngIf="reportsMenuItem.submenu; else menuItem" [matMenuTriggerFor]="submenu">
                <span class="material-icons primary-color" style="vertical-align: middle; padding-right: 8px;">
                  {{ reportsMenuItem.icon }}
                </span>
                {{ reportsMenuItem.name }}
              </button>
              <ng-template #menuItem>
                <button mat-menu-item (click)="goToSubReports(reportsMenuItem.value)">
                  <span class="material-icons primary-color" style="vertical-align: middle; padding-right: 8px;">
                    {{ reportsMenuItem.icon }}
                  </span>
                  {{ reportsMenuItem.name }}
                </button>
              </ng-template>

              <mat-menu #submenu="matMenu">
                <ng-container *ngFor="let submenuItem of reportsMenuItem.submenu">
                  <button [disabled]="!isAdmin && submenuItem.isOnlyAdminAccess" mat-menu-item *ngIf="!submenuItem.submenu?.length" (click)="goToSubReports(submenuItem.value !== undefined ? submenuItem.value : null)">
                    {{ submenuItem.name }}
                  </button>
  
                  <ng-container *ngIf="shouldShowSubmenu(submenuItem) && submenuItem.submenu?.length > 0">
                    <button mat-menu-item [matMenuTriggerFor]="submenusub">
                      {{submenuItem.name}}
                    </button>
                  </ng-container>
                </ng-container>
                
              </mat-menu>

              <mat-menu #submenusub="matMenu">
                <button [disabled]="!isAdmin && submenuItemSub.isOnlyAdminAccess" mat-menu-item *ngFor="let submenuItemSub of getSubMenu(reportsMenuItem.submenu, 'Available Properties')" (click)="goToSubReports(submenuItemSub.value !== undefined ? submenuItemSub.value : null)">
                  {{ submenuItemSub.name }}
                </button>
              </mat-menu>
            </ng-container>
          </mat-menu>

Angular Material的Mat Menu默认对菜单项文本做了截断处理，需要覆盖关键CSS样式来实现换行或完整显示：

方法一：基础换行配置 #

将以下样式添加到组件的样式文件（如.component.scss）中：

/* 调整菜单面板最小宽度，避免过窄导致换行频繁 */
.reports-mat-menu-panel-customized {
  min-width: 280px; /* 可根据实际需求调整 */
}

/* 覆盖菜单项文本的截断样式 */
.reports-mat-menu-panel-customized .mat-mdc-menu-item .mat-mdc-menu-item-text {
  white-space: normal; /* 允许文本自动换行 */
  overflow: visible; /* 取消文本溢出隐藏 */
  text-overflow: unset; /* 取消省略号显示 */
  word-break: break-all; /* 强制断词，适配无空格的超长文本 */
}

如果是带空格的正常长文本，可将word-break: break-all替换为word-wrap: break-word，保持单词完整性。

方法二：兼容子菜单样式 #

如果子菜单也存在同样问题，补充以下样式：

/* 让子菜单继承父菜单的宽度配置 */
.reports-mat-menu-panel-customized .mat-mdc-menu-panel {
  min-width: inherit;
}

/* 统一子菜单项的文本样式 */
.reports-mat-menu-panel-customized .mat-mdc-menu-item .mat-mdc-menu-item-text {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-all;
}

旧版Angular Material适配 #

如果你使用的是非MDC版本的Angular Material，样式类名需调整为：

.reports-mat-menu-panel-customized .mat-menu-item .mat-menu-item-text {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-all;
}

内容的提问来源于stack exchange，提问作者Mr. Mark Tawin