如何在 mat-select 的两行中显示数据？

Question

在 mat-select 选项的字符串太长，选择的选项应该在同一个下拉列表中显示为两行。

现在字符串看起来不完整。

不完整的字符串示例

<mat-form-field class="form-field">
    <mat-select formControlName="foo">
        <mat-option value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </mat-option>
     </mat-select>
</mat-form-field>

我想要这样的东西

示例完成选定的选项

Answer 1

似乎有一些过时的答案。
从 Angular 材料 11 开始，您可以通过调整 mat-option 的 css 轻松做到这一点。

<mat-option class="multiline-mat-option">
   <div>Line 1</div>
   <div>Line 2</div>
</mat-option>

.multiline-mat-option.mat-option {
  white-space: normal;
  line-height: normal;
}