空間不足<mat-select> . 如何添加多行<mat-option> ?

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

或者

/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

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

我通過編寫一個擴展<mat-option>的MultiLineOptionDirective並從@angular/material/core調用與MatListItem和MatGridTile相同的setLines()函數解決了這個MatListItem

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

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

編輯：“擴展”可能會被誤解，在指令中擴展擴展元素的功能而不是類擴展基類。

Answer 4

這顯示了 2 列中的長文本。

在 .scss 添加：（如果您希望每一行都具有相同的高度，您可以刪除最后 3 行）

.multiline-mat-option.mat-option {
    white-space: normal;
    line-height: normal;
    height: unset;
    padding-top: 0.9em;
    padding-bottom: 0.9em;
} 

在 HTML 中：

<mat-option class="multiline-mat-option"...

Answer 5

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

我最近遇到了這個問題，經過一些調試后，我發現您可以引用與 .

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

這會將文本換行到下一行並相應地調整高度。 如果您正在處理動態數據，您還可以執行line-height: auto 。