jquery - 最初のオーバーフロー要素を省略記号「...」に置き換える方法

Question

内部に複数の<p>タグを含むdivがあり、divは幅と高さが固定されており、親からオーバーフローするテキストだけを「...」に置き換えたい

<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>

ある時点で、テキストが親をオーバーフローします。その時点で、オーバーフローした単語を「...」に置き換えたいと考えています。

そのようです：

___________________________
| 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 ... |
|_________________________|

問題は、テキストが水平にうまく折り返されることです。長すぎると垂直に切り取られますが、問題ありません。必要なのは、半可視の行を完全に削除し、その前の最後の単語を「...」に置き換えることです

CSSでは無理だと思うので、jQueryで試しても構いません。

助けてくれてありがとう！