< mat-select>中没有足够的空间.如何添加多行< mat-option&gt ;? [英] not enough space in <mat-select>. How to add multiple line <mat-option>?

问题描述

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

I want to have under the option text additional lines which describe the option. By default mat-select limits number of characters and add "..." at the end of the line. I want to have multiple line option of needed. stakckblitz demo: https://stackblitz.com/edit/angular-wj9svw My code:

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>

推荐答案

使用以下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

这篇关于< mat-select>中没有足够的空间.如何添加多行< mat-option&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！