Angular 空间不足<；mat select>；。如何添加多行<；mat选项>；？

我想在选项下添加描述选项的文字行。 默认情况下，mat select限制字符数，并在行尾添加“…”。我想有多行选项的需要。stakckblitz演示： 我的代码：

html:

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
      <b> some additional text text text text texttext </b>
    </mat-option>
  </mat-select>
</mat-form-field>

{{food.viewValue}
一些附加文本

使用以下css：

    .mat-select-panel mat-option.mat-option {
      height: unset;
    }

   .mat-option-text.mat-option-text {
      white-space: normal;
    }

或

示例演示在这里-

---

这也很有帮助

我通过编写一个扩展

并调用与

MatListItem

和

MatGridTile

从

@angular/material/core

执行相同的

setLines（）

函数的

多行指令

解决了这个问题

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select [formControl]="mySelect">
    <mat-select-trigger>{{ mySelect.value }}</mat-select-trigger>
    <mat-option *ngFor="let food of foods" [value]="food.value" multiLineOption>
      <h4 mat-line>{{ food.value }}</h4>
      <p mat-line>{{ food.description }}</p>
    </mat-option>
  </mat-select>
</mat-form-field>

喜爱的食物
{{mySelect.value}}
{{food.value}
{{food.description}

---

编辑：“extends”可能会被误解，extends是指扩展元素的功能，而不是类扩展基类。

我使用了以下CSS

：：ng deep.mat选择面板mat-option.mat-option{
高度：未设置；
线高：1.2米；
垫面：0.9em；
垫底：0.9em；
}
：：ng deep.mat-option-text.mat-option-text{
空白：正常；
}

我最近遇到了这个问题，经过一些调试，我发现您可以引用与关联的类

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

---

这会将文本换行到下一行，并相应地调整高度。如果您使用的是动态数据，也可以执行

行高：auto

。

不幸的是，这只适用于一个mat选项项。尝试在stackblitz示例中添加几个（如19），您将看到通过单击选择项目不再正常工作，也就是说，每次单击列表都会滚动，无法看到您选择的内容。Brain想写10+，手动键入19。查看

word wrap

，

行高

和

空白

修复了大多数情况下的溢出问题

空白：正常

是更好的方法。。请在此处阅读有关预包装的信息。它具有换行符的重要性。我不知道为什么该指令不应用于我的html元素。我刚刚在我的共享模块中导入了多行模块并导出。您的mat选项中是否有多行选项。我在我的

mat选项上有
多行选项
。它以前不起作用。我想是一些css问题。让我再试一次。
.mat-option {
  margin: 1rem 0;
  overflow: visible;
  line-height: initial;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.mat-option i {
  display: block;
  font-size: 1.5rem;
  opacity: 0.6;
  margin-left: 0.5rem;

}

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select [formControl]="mySelect">
    <mat-select-trigger>{{ mySelect.value }}</mat-select-trigger>
    <mat-option *ngFor="let food of foods" [value]="food.value" multiLineOption>
      <h4 mat-line>{{ food.value }}</h4>
      <p mat-line>{{ food.description }}</p>
    </mat-option>
  </mat-select>
</mat-form-field>

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