本文介绍了< mat-select>中没有足够的空间.如何添加多行< 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-wj9svwMy 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> ;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!