cross browser nowrap textarea

Question

I'm looking for a cross browser solution that makes textarea :

• wrap text only on enter
• scrollbars both hidden, until text overflows

I have tried almost everything can be found in SO...

Failed #1:

textarea{
  white-space:nowrap;
  overflow: auto;
}

does not work in FF

Failed #2:

textarea{
  white-space:nowrap;
  overflow: auto; // or scroll
}
+WRAP=OFF attribute

here I cant hit enter in IE (jsFiddle)

Failed #3:

textarea{
  white-space:pre;
  overflow: auto;
}
+WRAP=OFF attribute

auto line break in IE if I reaches the end

Answer 1

All I did was remove your white-space: nowrap; and it works :).

textarea{
overflow: auto;
}

<textarea wrap="off">
Lorem asldm,és améld masémd éasmdá qw3őri2ő3pjm powemfnsd f
dsf lsdmflkms dlkfmsldk mflksdmfk lmsklf
</textarea>

Answer 2

<textarea wrap="off"><textarea>

Answer 3

You should try white-space: pre;

textarea{
  white-space: pre;
  width: 200px;
  height: 200px
}

<textarea>
Hello World!
Happy New Year Stack Overflow!!
    With Indent
</textarea>

Answer 4

overflow-wrap: normal;

Just change the overflow parameter for wrap to normal.