Take a look in this example: /

I have created 2 textareas with different CSS settings using .val. I then set 2 textareas 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.

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

I have created 2 textareas with different CSS settings using .val. I then set 2 textareas 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.

• javascript
• html
• css

• 1 What browser are you using? No issues on Firefox. I get four spaces in front of the text in both textareas. – RRikesh Commented Jul 24, 2013 at 6:56
• Am also tried. Both having spaces. Am using firefox. – Nithesh Narayanan Commented Jul 24, 2013 at 6:57
• Chrome is the issue indeed. – Kees Sonnema Commented Jul 24, 2013 at 6:58
• 1 And I do get your issue on Chrome! – RRikesh Commented Jul 24, 2013 at 6:58
• Removing white-space: nowrap; works for Chrome. – Kees Sonnema Commented Jul 24, 2013 at 6:59

3 Answers 3

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 ments, 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

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

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

According to this article from CSS-Tricks:

Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on it's own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces one the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre;

So, white-space: pre will keep the whitespace.

Also from MDN:

Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.