1

I have an Input with a long placeholder.

I'm trying to make line breaks but I am not able to find a working solution .

I've tried to add 
 and \n in the placeholder text but that's not working.

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

input placeholder

Here's a stackblitz example

Vega
  • 27,856
  • 27
  • 95
  • 103
infodev
  • 4,673
  • 17
  • 65
  • 138
  • Possible duplicate of [Insert line break inside placeholder attribute of a textarea?](https://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea) – Sangwin Gawande May 14 '18 at 10:18

1 Answers1

1

That input needs some height to wrap the whole placeholder so it is visible. Styling ::-webkit-input-placeholder or :: placeholder would make it appear on multiple lines. Turn off the encapsulation in order to this style work

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
})

Demo

Vega
  • 27,856
  • 27
  • 95
  • 103
  • not working in primeng autocomplete input , example : https://stackblitz.com/edit/test-primeng-buhnla?file=app%2Fapp.component.html – infodev May 14 '18 at 12:42