如何实现mat-label多行显示并解决与下拉框重叠问题

针对mat-label设置多行显示后和mat-select重叠的问题，提供以下几种可行方案：

方案1：调整表单域顶部内边距 #

通过增加mat-form-field的顶部内边距，给多行标签预留足够空间，避免与下方下拉框重叠：

1. 添加自定义CSS：

/* 自定义表单域类，调整顶部内边距 */
.multi-line-label-form .mat-form-field-wrapper {
  padding-top: 2.8em; /* 根据标签行数调整数值 */
}

/* 保持标签多行显示 */
.multi-line-label-form .mat-form-field-label {
  white-space: normal !important;
  line-height: 1.3; /* 优化多行文本行高 */
}

2. 修改HTML中的mat-form-field：

<mat-form-field class="example-full-width multi-line-label-form">
  <mat-label>What cultural background or ethnicity do you identify with?</mat-label>
  <!-- mat-select及其他内容保持不变 -->
</mat-form-field>

方案2：设置标签始终浮动 #

利用Angular Material的floatLabel="always"属性，让标签始终固定在表单域上方，自动避开下拉框区域，同时支持多行显示：

1. 修改HTML：

<mat-form-field class="example-full-width" floatLabel="always">
  <mat-label>What cultural background or ethnicity do you identify with?</mat-label>
  <!-- mat-select及其他内容保持不变 -->
</mat-form-field>

2. 配合多行标签CSS：

.mat-form-field-label {
  white-space: normal !important;
  line-height: 1.2;
}

此方案符合Material Design规范，无需手动调整间距，适配性更强。

方案3：自定义外部标签布局 #

将标签移出mat-form-field，放在单独的容器中，完全控制标签与表单域的间距，彻底避免重叠：

1. 修改HTML结构：

<div class="col-sm-4 require" (click)="onClick($event)">
  <!-- 自定义外部标签 -->
  <div class="form-field-label">
    What cultural background or ethnicity do you identify with?
  </div>
  <mat-form-field class="example-full-width">
    <!-- 移除内部mat-label -->
    <mat-select autofocus formControlName="otherCulturalBackgroundID"
      [ngClass]="{ 'is-invalid': submitted && formControls.otherCulturalBackgroundID.errors }" required>
      <mat-option *ngFor="let race of masterRace" [value]="race.id" (click)="onClick($event)">
        {{race.value}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="formControls.otherCulturalBackgroundID.errors">
      Please select other cultural backgrounds
    </mat-error>
  </mat-form-field>
</div>

2. 添加标签样式：

.form-field-label {
  margin-bottom: 0.6em;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6); /* 匹配Material默认标签颜色 */
  font-size: 14px; /* 匹配Material默认标签字号 */
}

此方案灵活性最高，适合需要完全自定义表单布局的场景。

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