html - 为 mat-autocomplete 的 mat-option 添加样式
问题描述
<div style="width: 150px">
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</div>
的默认行为mat-option
是使用
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
我想将长句分成下一行,而不是使用
...
. 样式不起作用:(我还需要覆盖我也尝试使用下面的代码的字体,但它不会覆盖
mat-option {
font-family: "Times New Roman", Times, serif; // does not work
}
请帮忙。
解决方案
您可以将其添加到您的 CSS:
.mat-option{
word-wrap:break-word !important;
white-space:normal !important;
font-family: "Times New Roman", Times, serif;
}
.mat-option-text{
line-height:initial !important;
}
推荐阅读
- python - 如何让 Python 程序从终端连续运行(直到我手动停止它)?
- python - 如何在python中将一列分成多列?
- java - 如何在 eclipse kepler (Sts 3.4) 中添加 JBOSS EAP 7.2 服务器,因为 7.2 没有可用的适配器服务
- python - 如何对另一个查询集/查询进行 INNER JOIN
- java - 在java中记录的异常
- c# - 如何使用 HEX 值更改白色精灵的颜色?
- python - Django:在这种情况下,我该如何迁移?迁移不起作用
- ruby-on-rails - 如何使用基于当前值的值更新 rails 表列
- javascript - 如何通过使用正则表达式和 split() 函数使用某些输入模式以数组形式拆分段落..?
- mongodb - 是否可以从通用案例类创建编解码器提供程序?