Question

我想在选项文本下有描述选项的其他行。默认情况下，mat-select限制字符数，并在行末添加“ ...”。我想有需要的多行选项。 stakckblitz演示：https://stackblitz.com/edit/angular-wj9svw 我的代码：

export class SelectOverviewExample {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak longDescription longDescription longDescription longDescription longDescription'},
    {value: 'pizza-1', viewValue: 'Pizza longDescription longDescription longDescription longDescription longDescription longDescription v v longDescription'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
}

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>

Answer 1

使用以下css：

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

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

OR

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

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

示例演示在这里-https://stackblitz.com/edit/angular-material2-issue-ndtstg

Answer 2

我通过编写扩展了MultiLineOptionDirective的{{1}}并调用了<mat-option>和setLines()从MatListItem开始的MatGridTile函数来解决/ p>

@angular/material/core

https://stackblitz.com/edit/angular-material-multi-line-option

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

Answer 3

.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;

}

这也很有帮助

Answer 4

我使用了以下CSS。

::ng-deep .mat-select-panel mat-option.mat-option {
    height: unset;
    line-height: 1.2em;
    padding-top: 0.9em;
    padding-bottom: 0.9em;
}

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

Answer 5

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

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

这会将文字换行到下一行，并相应地调整高度。如果要处理动态数据，也可以执行line-height: auto。

<mat-select>中没有足够的空间。如何添加多行<mat-option>？

5 个答案: