Placeholder text does not wrap in text field

HTML & CSS
1

In this code:

<li><textarea name="Summaries" cols="20" rows="7" style="background-color:#fff; color:#000; height:40em;" placeholder="Don't type here. After tapping Load, what you typed above will appear here. Just copy data from here to your email client to export."  ></textarea></li>

The placeholder text does not wrap and stay in the field, but stays on one line and is cut off at right border. How do I get it to wrap? This is on an HTML page and will be viewed in the iPhone.

Thanks,
Steve

2

It also does not wrap when viewed in Safari on the desktop Is this normal behavior?

3

It wraps in Fx as it should, so I am guessing you have some other styles at play or something.

4

Why are you using a placeholder attribute to tell people not to type in the field rather than using a readonly attribute which will simply prevent them from doing so?

<li><textarea name="Summaries" cols="20" rows="7" style="background-color:#fff; color:#000; height:40em;" readonly></textarea></li>
5

I never heard of the readonly attribute! Thanks! Besides, I wanted to let them know the purpose of the field so they could use it.

6

The readonly attribute was introduced in HTML 3.02 so it is fast approaching its 20th anniversary as a part of the standards - unlike the placeholder attribute which is over 20 years younger (since it is still a long way off becoming a part of the standards).

7

I’m using placeholders everywhere to let the user know he has only 30 characters. Then he knows the field won’t expand for more text.

8

Just as long as you remember that most browsers don’t support it yet as it is still only a proposed addition to a future standard.

9

Oh, that’s good to know. I’m only using it in the Safari browser engine, which is used in the iPhone.