基于Angular flex-layout的响应式工具栏，带图标的按钮换行异常问题咨询

过渡尺寸下按钮内部文字与图标换行，由两个核心问题导致：

• 首个菜单按钮错误配置了fxLayoutWrap="wrap"，直接允许按钮内部元素自动换行
• 所有包含「文字+图标」的mat-button未被设置为flex行容器，默认的行内块布局下，当过渡尺寸的工具栏空间被挤压时，内部行内元素会自动折行

按优先级依次调整：

• 移除所有按钮上多余的fxLayoutWrap="wrap"配置，尤其是首个validations按钮上的错误设置
• 给所有包含「文字+图标」的mat-button添加flex布局规则，将按钮本身设置为行式flex容器，强制内部元素不换行：
  • 加fxLayout="row" 启用行式flex布局
  • 加fxLayoutAlign="center center" 保证文字、图标垂直居中对齐
  • 加fxLayoutWrap="nowrap" 禁止内部元素换行
• 补充全局样式双保险，给按钮添加white-space: nowrap，避免文字被强制折行
• 可选优化：如果md到lg过渡区间的工具栏空间仍然紧张，可调整顶部菜单的显隐断点，将原fxHide.lt-md改为fxHide.lt-lg，让小于lg尺寸的设备直接使用侧边导航，完全规避过渡尺寸的宽度不足问题

<mat-toolbar fxLayout="row">
    <button mat-icon-button (click)="sidenav.toggle()" fxHide fxShow.lt-md>
      <mat-icon>menu</mat-icon>
    </button>
    <div fxShow fxHide.lt-md fxLayout="row" fxLayoutGap="4px">
      <a mat-button fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap="nowrap">
        {{ 'menu.validations' | translate }}
      </a>
      <a mat-button [matMenuTriggerFor]="reports" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap="nowrap">
        {{ 'menu.reports' | translate }}
        <mat-icon>arrow_drop_down</mat-icon>
      </a>
      <a mat-button [matMenuTriggerFor]="management" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap="nowrap">
        {{ 'menu.management' | translate }}
        <mat-icon>arrow_drop_down</mat-icon>
      </a>
      <a mat-button [matMenuTriggerFor]="settings" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap="nowrap">
        {{ 'menu.settings' | translate }}
        <mat-icon>arrow_drop_down</mat-icon>
      </a>
    </div>
    <span class="spacer"></span>
    <div fxFlex fxLayoutAlign="end start">
      <!-- RRSS ICONS -->
    </div>
    <div fxShow="true" class="combo" fxLayout="row" fxLayoutAlign="center center">
      <a mat-button matTooltip="{{ 'menu.profile.logout' | translate }}" (click)="logout()">
        <mat-icon>exit_to_app</mat-icon>
      </a>
      <app-i18n-combo></app-i18n-combo>
    </div>
</mat-toolbar>

补充全局样式（可放在全局styles.scss或组件样式文件中）：

// 兼容新旧版Material按钮
.mat-mdc-button, .mat-button {
  white-space: nowrap;
  // 优化图标与文字间距，减少不必要的宽度占用
  .mat-icon {
    margin-left: 4px;
  }
}

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