Angular Material 15+ mat-select下拉选项不换行后面板位置异常

针对你遇到的mat-select选项不换行后面板超出页面的问题，可以通过以下几种方式调整overlay的定位或宽度计算：

方法1：自定义Overlay位置策略 #

通过Angular Material的OverlayPositionBuilder自定义下拉面板的位置规则，让面板在页面空间不足时自动调整方向（比如向左展开而非向右），避免超出页面。

在组件中注入OverlayPositionBuilder，然后为mat-select指定自定义位置：

import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';
import { OverlayPositionBuilder, ConnectedPosition } from '@angular/cdk/overlay';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent {
  @ViewChild('select') select!: MatSelect;
  customPositions: ConnectedPosition[] = [];

  constructor(private positionBuilder: OverlayPositionBuilder) {
    // 定义优先位置：先尝试下方左对齐，空间不足则下方右对齐，再上方左对齐，最后上方右对齐
    this.customPositions = [
      this.positionBuilder
        .flexibleConnectedTo('')
        .withPositions([
          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }
        ])
        .positions
    ];
  }
}

在模板中绑定自定义位置：

<mat-select #select [overlayPosition]="customPositions">
  <!-- 你的选项内容 -->
</mat-select>

方法2：动态计算面板宽度并调整定位 #

结合CSS和组件逻辑，先计算最长选项的宽度，再设置面板的宽度，同时确保面板不会超出视口：

1. 保留你现有的CSS，添加视口约束：

.mat-mdc-select-panel {
  min-width: fit-content !important;
  max-width: calc(100vw - 20px); /* 限制面板最大宽度不超过视口，留20px边距 */
  margin: 0 10px; /* 避免面板贴边显示 */

  .mat-mdc-option {
    .mdc-list-item__primary-text {
      color: mat.get-color-from-palette($foreground, primary-text);
      white-space: nowrap;
      overflow: visible;
      text-overflow: unset;
    }
  }
}

2. 在组件中动态计算最长选项宽度并调整面板位置：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('select') select!: MatSelect;

  ngAfterViewInit() {
    this.select.openedChange.subscribe(isOpened => {
      if (isOpened) {
        setTimeout(() => {
          const panel = document.querySelector('.mat-mdc-select-panel') as HTMLElement;
          if (!panel) return;
          
          // 计算最长选项的宽度
          const options = panel.querySelectorAll('.mdc-list-item__primary-text');
          let maxWidth = 0;
          options.forEach(opt => {
            maxWidth = Math.max(maxWidth, (opt as HTMLElement).offsetWidth);
          });
          // 加上选项内边距等额外宽度
          panel.style.width = `${maxWidth + 40}px`;

          // 检查面板是否超出视口，调整左侧位置
          const rect = panel.getBoundingClientRect();
          if (rect.right > window.innerWidth) {
            panel.style.left = `${window.innerWidth - rect.width - 10}px`;
          }
        }, 0);
      }
    });
  }
}

方法3：全局修改MatSelect的Overlay配置 #

通过提供MAT_SELECT_CONFIG全局修改select的overlay行为，设置自定义的面板类和位置策略：

import { MAT_SELECT_CONFIG } from '@angular/material/select';
import { OverlayPositionBuilder } from '@angular/cdk/overlay';

@NgModule({
  providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useFactory: (positionBuilder: OverlayPositionBuilder) => ({
        overlayPanelClass: 'custom-select-panel',
        positionStrategy: () => {
          return positionBuilder
            .flexibleConnectedTo('')
            .withPositions([
              { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
              { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }
            ])
            .withFlexibleDimensions(false)
            .withPush(false);
        }
      }),
      deps: [OverlayPositionBuilder]
    }
  ]
})
export class YourModule {}

对应的CSS：

.custom-select-panel {
  min-width: fit-content !important;
  max-width: calc(100vw - 20px);
}

以上几种方法都可以解决面板超出页面的问题，你可以根据实际业务场景选择最合适的方案。

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