CODEWITHSUNDEEP
javascripthtmlcss
Derek 朕會功夫
Derek 朕會功夫

Reputation: 94339

Spaces disappearing in textarea?

Take a look in this example: http://jsfiddle.net/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.

enter image description here

I tested on Chrome and another Webkit-based browser. Same result.

Upvotes: 4

Views: 3681

Answers (3)

Praveen
Praveen

Reputation: 56509

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

Upvotes: 3

Nithesh Narayanan
Nithesh Narayanan

Reputation: 11775

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

Upvotes: 2

RRikesh
RRikesh

Reputation: 14381

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.

Upvotes: 1

Related Questions