如何用省略号“...”替换第一个overflown元素 [英] How to replace first overflown element with ellipsis "..."

问题描述

我有一个div与多个< p> 标签里面，div是固定的宽度和高度，我想替换只溢出父...

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

如下：

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

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

感谢alot为您的帮助！

thanks alot for your help!

推荐答案

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

This is a solution I often use:

Multiline Ellipsis in pure CSS

还有一个jQuery插件： dotdotodt

There is also a jQuery plugin: dotdotodt

这篇关于如何用省略号“...”替换第一个overflown元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！