如何实现Angular Material Mat-Select的多行Placeholder？

要解决Mat-Select占位符文本过长被截断的问题，以下两种方案可以实现多行显示效果：

方案一：利用换行符+CSS样式 #

直接给占位符绑定带换行符的字符串，再通过CSS让文本自动换行：

修改后的HTML代码：

<div class="col-sm-4 require">
  <mat-form-field class="example-full-width multi-line-placeholder">
    <mat-select autofocus 
                [placeholder]="'Are you of Aboriginal and/or Torres Strait' + '\n' + 'Islander origin?'" 
                formControlName="islandOriginID"
                [ngClass]="{ 'is-invalid': submitted && formControls.islandOriginID.errors }" 
                required>
      <mat-option *ngFor="let island of islandOrigin" [value]="island.id">
        {{island.globalCodeValue}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="formControls.islandOriginID.errors">
      Please select island origin
    </mat-error>
  </mat-form-field>
</div>

添加对应的CSS：

/* 让占位符识别换行符并换行 */
.multi-line-placeholder .mat-select-placeholder {
  white-space: pre-line;
  line-height: 1.2;
  height: auto;
}

/* 调整下拉箭头位置，避免和多行文本重叠 */
.multi-line-placeholder .mat-select-arrow {
  align-self: center;
}

方案二：自定义占位符模板 #

如果方案一不生效，使用mat-select-trigger自定义占位符的显示逻辑，这种方式可控性更强：

修改后的HTML代码：

<div class="col-sm-4 require">
  <mat-form-field class="example-full-width">
    <mat-select autofocus 
                formControlName="islandOriginID"
                [ngClass]="{ 'is-invalid': submitted && formControls.islandOriginID.errors }" 
                required>
      <!-- 未选择时显示自定义多行占位符 -->
      <mat-select-trigger *ngIf="!formControls.islandOriginID.value">
        <div class="custom-placeholder">
          Are you of Aboriginal and/or Torres Strait<br>
          Islander origin?
        </div>
      </mat-select-trigger>
      
      <mat-option *ngFor="let island of islandOrigin" [value]="island.id">
        {{island.globalCodeValue}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="formControls.islandOriginID.errors">
      Please select island origin
    </mat-error>
  </mat-form-field>
</div>

对应的CSS：

.custom-placeholder {
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.6); /* 匹配默认占位符颜色 */
}

两种方案都能实现你需要的多行占位符效果，根据实际场景选择即可。

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