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。

非常感谢您的帮助!

Answer 1

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

Multiline Ellipsis in pure CSS

还有一个jQuery插件:dotdotodt