Добавление стиля в mat-option из mat-autocomplete
У меня этот HTML код здесь
<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
}
Пожалуйста помоги.
Ответы 2
Причина, по которой ваша стратегия не работает, заключается в том, что фактические параметры показаны в наложении, которое помещается в <body>. Следовательно, селектор component mat-option не может работать, потому что параметры не помещены в компонент.
Чтобы переопределить любые стили, которые есть в mat-option, вам лучше обратиться к классу .mat-option и поместить его в глобальный styles.scss
.mat-option {
font-family: "Times New Roman", Times, serif; // ?
}
любая помощь по разрыву строки, а не ... в нем
извините, это немного больше стиля для короткого ответа, вам нужно отредактировать поведение .mat-option и .mat-option-text вместе.
@ User985614: white-space: wrap; text-overflow: initial; не работает?
Ну, тогда есть line-height, option height, и многое другое. Я бы посоветовал добавить больше места, чем пытаться изменить материал. Используя вход panelWidth: string | number.
Вы можете добавить это в свой 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;
}
Спасибо :) глупый я.