Разрыв строки, когда заполнитель достигает ширины ввода в начале

Question

У меня есть вход с длинным заполнителем.

Я пытаюсь сделать разрывы строк, но не могу найти рабочее решение.

Я пытался добавить 
 и \n в текст заполнителя, но это не работает.

<input type="text" pInputText placeholder="Username &#10;UsernameUsername  UsernameUsername" />

Вот пример стека Пример

Answer 1

Для этого ввода требуется некоторая высота, чтобы обернуть весь заполнитель, чтобы он был виден.Styling :: - webkit-input-placeholder или :: placeholder заставит его появиться на нескольких строках.Отключите инкапсуляцию, чтобы этот стиль работал

CSS

::-webkit-input-placeholder,::placeholder {
  position:relative;
  white-space: pre-line;
  word-break: break-all;
  top:-20px;
}

HTML

  <input type="text" [inputStyle]="{'height':'40px'}"  placeholder="Username UsernameUsername  UsernameUsername" />

Класс:

import { ViewEncapsulation } from '@angular/core';
...
@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

Demo