Cannot turn off placeholder wrap in Firefox textarea

Question

The code for disabling wrapping in textarea works perfectly in webkit, but not in firefox.

Demo (webkit): http://jsfiddle.net/cuk2072g/2/

Code:

#textArea {
  color: red;
  height: 200px;
  width: 300px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  resize: none;
}

#textArea::-webkit-input-placeholder {
  color: green;
  white-space: nowrap;
  overflow: hidden;
}

<textarea class="form-control" id="textArea" placeholder="_____________________________________________________________________________________________________________">
    </textarea>

Webkit works perfectly as expect, but Firefox has issues...

Demo (firefox): http://jsfiddle.net/g7CsP/3/

Code:

#textArea {
  color: red;
  height: 200px;
  width: 300px;
  text-align: left;
  resize: none;
}

#textArea::-moz-placeholder {
  color: green;
  white-space: nowrap;
  overflow: hidden;
}

<textarea class="form-control" id="textArea" placeholder="_____________________________________________________________________________________________________________">
    </textarea>

Answer 1

I found the solution here: it's the 2nd highest answer How remove word wrap from textarea?

CSS:

#textArea {
    color:red;
    height: 200px;
    width: 300px;
    text-align:left;
    word-wrap: normal;
    resize:none;
    }

#textArea::-moz-placeholder {
    color:green;
    }

http://jsfiddle.net/g7CsP/4/