How to fit a placeholder in the form?

Question

I am working on the form as shown in the fiddle in which I want to fit a complete placeholder text in the form.

The HTML which I have used in order to make a small input form is:

<div class="container text-center ">
   <div class="form-group">
      <label class="ml-2" style="width:100%;text-align:left;" for="inputAddress">Hello World</label>
      <input type="text" class="form-control" id="inputAddress" placeholder="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">
   </div>
</div>

Problem Statement:

I am wondering what changes I should make in the fiddle so that I can see the complete placeholder text. At this moment, I can see few words(not the complete statement) as shown below in the image:

Pretty sure this is not possible. If you have that much text it's not a placeholder really is it? — Paulie_D, Aug 20 '18 at 16:03
https://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea — Paulie_D, Aug 20 '18 at 16:06
@flash See [this answer](https://stackoverflow.com/questions/7312623/insert-line-break-inside-placeholder-attribute-of-a-textarea) — T A, Aug 20 '18 at 16:06
anyhow, input won't allow line-break, textarea is the proper tag to use for so much text ;) — G-Cyrillus, Aug 20 '18 at 16:08
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) — Petr Hejda, Aug 20 '18 at 16:09

score 2 · Answer 1 · answered Aug 20 '18 at 16:03

2

use textarea instead of input, that will give you multi-line display.

see this example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_placeholder

answered Aug 20 '18 at 16:03

Ji_in_coding

1,691
1
14
17

score 1 · Answer 2 · answered Aug 20 '18 at 16:03

1

You should try a textarea instead of an input.

answered Aug 20 '18 at 16:03

Vic Segers

197
1
1
11

score 0 · Answer 3 · answered Aug 20 '18 at 16:05

0

This isn't a Bootstrap issue, but you can use CSS3 -placeholder like this...

http://jsfiddle.net/navcLefq/1/

::-webkit-input-placeholder {
  white-space:pre-line;  
  position:relative;
}
::-moz-placeholder {
  white-space:pre-line;  
  position:relative;

}
:-ms-input-placeholder {
  white-space:pre-line;  
  position:relative;
}
:-moz-placeholder {
  white-space:pre-line;  
  position:relative;
}

answered Aug 20 '18 at 16:05

Carol Skelly

351,302
90
710
624

in FF every things still stands on one line , it is unreadable, input should be turned into textarea for that amount of text anyway ;) – G-Cyrillus Aug 20 '18 at 16:11

How to fit a placeholder in the form?

3 Answers3