How to replace first overflown element with ellipsis "..."

Question

I have a div with mutiple <p> tags inside it, the div is fixed width and height and I want to replace just the text that overflows the parent with "..."

<div class="container" style="width:200px; height:400px; overflow:hidden;">
   <p class="pText">one one one one one one one one one one one one </p>
   <p class="pText" >two two two two two two two two two two two two </p>
   <p class="pText">three three three three three three three three </p>
   <p class="pText">four four four four four four four four four four </p>
   <p class="pText">five five five five five five five five five five </p>
   <p class="pText">six six six six six six six six six six six six six </p>
</div>

at some point the text overflows the parent, at which point i want to replace the overflow word with "...".

like so:

___________________________
| one one one one one one |
| two two two two two two |
| two two                 |
| three three three three |
| three three three       |
| four four four four four|
| four                    |
| five five five five ... |
|_________________________|

thing is the text wraps horizontally just fine. it gets clipped vertically once its too long which is fine. what i need is to completley remove the line that is semi-visible and replace the last word before it with "..."

i guess its impossible by CSS so i dont mind trying with jQuery.

thanks alot for your help!

Answer 1

This is a solution I often use:

Multiline Ellipsis in pure CSS

There is also a jQuery plugin: dotdotodt