0

我有一个<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。

非常感谢你的帮助!

4

1 回答 1

1

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

纯 CSS 中的多行省略号

还有一个 jQuery 插件:dotdotodt

于 2013-03-31T15:00:40.643 回答