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