4

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/

frosty
  • 21,036
  • 7
  • 52
  • 74
  • I'm guessing that text-overflow only applies to non-replaced elements. – j08691 Mar 12 '12 at 21:08
  • 1
    Check the Compatability section of this page http://reference.sitepoint.com/css/white-space, doesnt look like you can do it in a textarea. – Dampsquid Mar 12 '12 at 21:09
  • Check this answer http://stackoverflow.com/questions/657795/how-remove-wordwrap-from-textarea, also updated your fiddle http://jsfiddle.net/PjuFB/14/ works in FF not sure on others – Dampsquid Mar 12 '12 at 21:37

1 Answers1

3

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

gkalpak
  • 47,844
  • 8
  • 105
  • 118
redDevil
  • 1,909
  • 17
  • 25
  • the problem with this approach is that the words for each line, each `p` element gets cut off, instead of words getting pushed down to the next `p`, and then being cut off at the end of the containing element as a whole... – oldboy Feb 01 '20 at 21:43