PrimeNG输入框占位符达宽度时换行问题求助

我太懂你现在的困扰了——用PrimeNG的pInputText做输入框时，长占位符死活没法自动换行，试了
和<br>都没效果对吧？其实这是因为原生input的placeholder默认不支持换行渲染，而PrimeNG的pInputText是基于原生input封装的，所以直接加换行符或HTML标签根本没用。

给你一个亲测可行的解决方案，通过CSS伪元素就能搞定：

步骤1：保留占位符里的换行符 #

你的HTML代码可以保持不变，继续用
来标记换行位置：

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

步骤2：添加CSS样式穿透 #

因为PrimeNG组件有样式封装特性，你需要用样式穿透来修改占位符的渲染规则。在组件的CSS文件里添加：

:host ::ng-deep .p-inputtext::placeholder {
  /* pre-line会让换行符生效，同时自动换行超出宽度的内容 */
  white-space: pre-line;
  /* 可选：调整行高让换行后的内容更美观 */
  line-height: 1.4;
}

如果希望严格按照你写的
位置换行，超出宽度的内容不自动折行，可以把white-space的值改成pre。

为啥之前的方法没用？ #

• <br>是HTML标签，input的placeholder属性只会解析纯文本，根本不会渲染HTML标签，所以完全无效。
• 
确实是换行符，但原生input默认的white-space: nowrap会直接忽略这个换行符，必须通过CSS修改white-space属性才能让它生效。

这样设置后，你的长占位符就能乖乖自动换行啦～

内容的提问来源于stack exchange，提问作者infodev