javascript - 如何在具有多个嵌套元素的 div 上伪造省略号？

Question

我的结构如下:

<div class="post">
    <p>In neque elit. Semper amet leo. Pulvinar ullamcorper ac nullam convallis amet nunc scelerisque porta. Dolor eu ornare ligula ut voluptatem. Orci dictum ullamcorper elit sit orci. Etiam lectus vel mattis suscipit iure sem imperdiet ante. Sed rutrum potenti magna arcu ullamcorper. Vivamus convallis velit. Eget elit scelerisque tincidunt cras ultrices metus nulla libero et mus luctus. Sagittis orci potenti scelerisque etiam eiusmod tempor pellentesque lobortis rutrum interdum nibh. Tellus quas elit. Pellentesque rhoncus magna. Eleifend in amet. Hac neque est rutrum et dis varius et dui. Vestibulum nulla magna. Magna interdum ac eros bibendum velit. Et amet nunc vel amet vel ligula dictum tristique dolor odio dui. Morbi dolor lectus. Nascetur nullam est.</p>
    <p>Vitae nulla vitae. Pellentesque ullamcorper magna. Non impedit in rhoncus lacus nulla ut vulputate nulla. Eros ultricies leo dolor ut luctus. Maecenas pharetra ut. Metus ut congue. Lacus ut vestibulum. Auctor tortor tempus. Aptent mattis lectus. Condimentum dolore velit maecenas officia arcu velit placerat nullam urna lacus justo. Nunc donec quam neque tortor enim sem eros dui vulputate rhoncus nam. Ut semper ad eu ac vel turpis duis ornare. Euismod mattis ante. Non aliquet eleifend ut mollis eget. Donec placerat at. In porttitor pellentesque. Accumsan sit arcu vestibulum habitant tempor ultrices justo praesent. Dui aliquam mauris in aliquam magna erat quisque orci. Conubia metus proin eu tincidunt wisi bibendum id condimentum in justo dui qui est dapibus. Facilisis eget at.</p>
    <p>Id ac ullamcorper odio urna tortor elit quam elementum. Erat vivamus ut sit massa metus maecenas wisi suspendisse quis hendrerit mauris. Quam at sodales blandit lacus vestibulum. Elit suspendisse quo. Vivamus auctor wisi. Quis id lobortis. Diam sociosqu et elementum erat magna. Elit elit eu. Laoreet habitant tempor pellentesque dictum eget. Ipsum lectus dignissim id elit proin ullamcorper quis morbi.</p>
</div>

我要做的是在 .post 上设置最大高度(200px)，然后在超过该点(或溢出)时伪造一个省略号。我在使用 jQuery 插件时遇到的问题是它只适用于个人 <p>元素，而不是作为一个整体的 div，所以我最终得到这样的东西:

First Paragraph:
Line one Line one Line one Line one Line one Line one Line one Line one 
Line two Line two Line two Line two Line two Line two Line two ...

Second Paragraph:
Line one Line one Line one Line one Line one Line one Line one Line one 
Line two Line two Line two Line two Line two Line two Line two ...

等等。

如果 jQuery 或 JavaScript 解决方案可行，我完全赞成，但就像我说的，它们中的大多数只适用于 <p>元素，而不是 <div>元素。 :(

这主要用于博客文章预览。我想要文本的样本，但不是全部。

为了方便起见，JS Fiddle:http://jsfiddle.net/kvh11xhg/

Answer 1

你可以使用伪元素伪造它:

DEMO

CSS:

.post {
    max-height: 6em;
    overflow: hidden;
    line-height:1.2em;
    position:relative;
}
.post:after{
    content:"...";
    position:absolute;
    bottom:0; right:0;
    padding:0 .5em;
    background: #fff;
}