Spaces disappearing in textarea?

css, html, javascript

Solution

Instead of using `whitespace: no-wrap;`

Try using

white-space: pre;

Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the `<pre>` tag in HTML.

Updates:

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

Also would like you to go through Textarea Tricks and refer

Nowrap section:

To prevent text from wrapping normally in CSS, you use `white-space: nowrap`. But for whatever reason, that doesn't work with textareas. If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you'll have to use the wrap="off" attribute.

Here is the fiddle

Problem

Take a look in this example: http://jsfiddle.net/DerekL/a7bUx/ I have created 2 `textarea`s with different CSS settings using `.val`. I then set 2 `textarea`s to the same value, both with 4 spaces in the front. However, The one with the CSS settings seems to "removed" those spaces. Why? I don't think `white-space: nowrap;` would have any affect on this, because even you press Ctrl+A to select all and paste it to a text processor the spaces are still missing. I tested on Chrome and another Webkit-based browser. Same result.

Original source