javascript - 如何只显示 div 的前几行(夹紧)？

Question

我有一个 div 列表，我在其中显示较长文档的预览。这些文档使用不同的字体样式。所以我没有固定的行高。这是一个例子:http://jsfiddle.net/z56vn/

我只需要显示每个文档的前几行。我们确定 300px 是正确的。如果我只是将 div 的 max-height 设置为 300px，那么根据文本属性(大小、填充、边距)，最后一行的底部会被剪掉。

如何为接近 300 像素但不会导致裁剪的每个 block 设置 max-height？

该解决方案可以使用 CSS、Javascript 和 jQuery。

---

这两个问题很相似，但它们的解决方案假定行高恒定。

• Show first 3 lines in html paragraph
• Show first line of a paragraph

Answer 1

仅使用 javascript 完美计算所有因素的算法太复杂了。

css3 有线夹

但这只适用于现代浏览器。

p{
 margin:20px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}

演示

http://jsfiddle.net/MM29r/

这允许您在添加 3 个点之前设置要显示的行数。

现在你想要 300px... 所以:

var p=document.getElementsByTagName('p')[0],
lineheight=parseInt(window.getComputedStyle(p).getPropertyValue("line-height"));
var lines=Math.floor(300/lineheight);
p.style['-webkit-line-clamp']=lines;

所以这为您提供了一个 300 像素或更小的元素

演示

http://jsfiddle.net/MM29r/1/

http://jsfiddle.net/MM29r/2/

需要的值:行高

现在，如果您想让框的高度恰好为 300 像素，只需在段落中添加边距或填充即可。但这取决于您的喜好。

如果您有任何问题，请尽管提出。

注意

每个通过计算单词在末尾添加 3 个点的 js 函数将是资源密集型的，无法应用于现实世界的网站。

更好的方法是对每个段落进行一次计算，并将钳制结果添加到数据库或将其存储在静态网站中。

但话又说回来，每个浏览器以不同的方式显示字体。

编辑

这是显示部分内容的不同方式。使用最大高度 & -webkit-column-count

https://stackoverflow.com/a/20691677/2450730

演示

http://jsfiddle.net/HNF3d/10/

支持度略高于line-clamp，可以显示全部内容。

EDIT2

底部的渐变图像。

p{
 width:300px;
 max-height:300px;
 overflow:hidden;
}
p:before{
 content:"";
 display:block;
 position:absolute;
 margin-top:240px;
 background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
 height:60px;
 width:300px;
}

http://jsfiddle.net/MM29r/9/

EDIT3

褪色图像旧浏览器(使用真实图像链接，而不是 base64)

http://jsfiddle.net/MM29r/13/