占位符在 primeng 中达到输入宽度时换行

Question

我有一个带长占位符的输入。

我正在尝试换行，但找不到可行的解决方案。

我尝试在占位符文本中添加 
 和 \n，但没有用。

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

这是一个 stackblitz example

Answer 1

该输入需要一些高度来包裹整个占位符，以便它可见。样式化 ::-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" />

Class:

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

Break line when placeholder reach input width in primeng