如何用省略号“......”替换第一个溢出元素

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。

非常感谢你的帮助！

Answer 1

这是我经常使用的解决方案：

Multiline Ellipsis in pure CSS

还有一个jQuery插件：dotdotodt