Is it possible to display the full text of a menu item instead of automatically converting it to ellipses or breaking the word? I've tried various CSS methods without success. Any suggestions?
https://i.stack.imgur.com/3l7gE.png
#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>