Угловой материал mat-form-field Заполнитель текста в несколько строк

Question

Я использую обычный mat-form-field с textarea внутри. Моя проблема в том, что текст-заполнитель для этого Textarea довольно длинный. В мобильных устройствах, где пространство более ограничено, этот заполнитель текста обрезается угловым материалом с многоточием.

Я бы хотел, чтобы текст местозаполнителя корректировался с учетом ограничения по пространству путем смещения вниз на следующую строку. Так, например, вместо:

This is a really long text and it cannot fit on a single li...

Хотелось бы:

This is a really long text and it cannot fit on a single
line

Я уже пробовал различные подходы к изменению CSS mat-input-placeholder и mat-input-placeholder-wrapper, но безуспешно. Я знаю, что часть решения включает изменение свойства text-overflow (ниже), но я не могу получить другие части.

::ng-deep .mat-input-placeholder {
  text-overflow: clip;
}

Может кто-нибудь помочь?

Спасибо!

Answer 1

::ng-deep устарело.

Вместо этого вы должны использовать ViewEncapsulation и контролировать CSS внутри компонента.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.None,
})

Для заполнителя (удалить placeholder из элемента):

<mat-placeholder style="white-space: normal;">{{question.label}}</mat-placeholder>

Затем добавьте свои стили CSS без ::ng-deep в example.component.css

.mat-form-field-label {
  white-space: normal;
}

textarea.mat-input-element {
  padding: 0px 0;
  margin: 5px 0;
}

.mat-input-placeholder {
  white-space: normal;
}