Textarea needs ellipsis instead of word wrap

Question

I need to know if any CSS Ninja out there can school me on how to do this. I have set up a JSFiddle with an example of what I am seeing.

It is a test area that has two line in it. Neither of the lines word wrap, but neither of them will ellipsis like I am asking them to. Perhaps it isn't possible.

http://jsfiddle.net/aaronfrost/PjuFB/

Answer 1

Is it imperative that you use a textarea itself? You can make that one work using a contenteditable div and p tags for the lines

<div contenteditable="true">
    <p class="wtf">
        WHAT IS HAPPENING asdfkjas dflkasd jfalskdfj asldkfj asldkf
    </p>
    <p class="wtf">
        SECOND LINE and it also needs to have an ellipsis
    </p>
</div>

View fiddle here