How do we show the full text or wrap menu item in angular mat menu

Issue

How do we show the full text or wrap menu item ? for example AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA is too long but right now it is automatically convert to ellipses but I want to display the full text or break word if possible ?

I tried different css ways but nothing works. Any idea guys ?

#html code

<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>

Solution

Please use the CSS property word-break: break-all; since the span extends the full length we restrict the length to the size of the parent. Please find below working example!

.mat-mdc-menu-item .mat-mdc-menu-item-text {
  width: 100% !important;
  overflow-wrap: break-word !important;
}

stackblitz

---

References

SO answer

Answered By - Naren Murali