Do spaces disappear in textarea?

Question

Take a look in this example: http://jsfiddle.net/DerekL/a7bUx/

I created 2 textarea with different CSS settings using .val . Then I set 2 textarea to the same value as with four spaces in front. However, one that has CSS settings seems to have "removed" these spaces. Why?

I do not think white-space: nowrap; will affect this because even you press Ctrl + A to select everything and paste it into the word processor, spaces are still missing.

I tested Chrome and another Webkit-based browser. The same result.

Answer 1

Instead of using whitespace: no-wrap;

Try using

 white-space: pre; 

Space is saved by the browser. Text will only wrap on line breaks. Acts as a <pre> in HTML.

Updates:

From your comments you should go with the wrap="off" attribute.

I would also like you to go through Textarea Tricks and send

Nowrap Section:

To prevent plain text wrapping in CSS, use white-space: nowrap . But for some reason this does not work with text areas. If you want to be able to enter text in text fields and rather do not interrupt the lines until you press return / enter (horizontal scroll bar instead), you will have to use the wrap = "off" attribute .

Here is the fiddle

Answer 2

Avoid white-space: nowrap; check fiddle in chrome. it will work

You can use javscript and regular expression to removing trailing white spaces . Here is a fiddle example. I think this will help you.

Answer 3

According to this article from CSS-Tricks :

Note that in the HTML code example at the top of this article there are actually two line breaks, one before the line of text and one after that allow you to use text on its own line (in the code). When the text is displayed in the browser, these line breaks look as if they were cut. Also, there are no extra spaces one line before the first letter. If we want to force the browser to display these line breaks and extra space characters, we can use white-space: pre;

So white-space: pre save spaces.

Also from MDN :

Sequences of spaces are preserved, lines are only broken into newlines in the source and in <br> elements.