如何仅显示div的前几行(clamp)？

Question

我有一个列表,divs其中显示较长文档的预览.文档使用不同的字体样式.所以我没有恒定的线高.这是一个例子:http://jsfiddle.net/z56vn/

我只需要显示每个文档的前几行.我们已经确定300px是正确的.如果我只设置一个max-height300px到divs,那么根据文本属性(大小,填充,边距),最后一行的底部会被剪裁.

如何max-height为接近300px但不会导致剪裁的每个块设置一个？

该解决方案可以使用CSS,Javascript和jQuery.

---

这两个问题是相似的,但他们的解决方案采用恒定的线高.

• 在html段落中显示前3行
• 显示段落的第一行

Answer 1

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

有了css3,就有线夹

但这仅适用于现代浏览器.

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

DEMO

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;

所以这给你一个300px或更少的元素

DEMOS

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

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

需要的价值: line-height

现在,如果你想让盒子正好300px高度,只需在段落中添加边距或填充.但这取决于你的喜好.

如果你有一些问题,请问.

注意

通过计算单词在最后添加3个点的每个js函数将是在现实世界网站中应用的资源密集型.

更好的方法是一次计算每个段落并将压缩结果添加到数据库或将其存储在静态网站中.

但是后来每个浏览器都以不同的方式显示字体.

编辑

这是显示部分内容的不同方式.使用max-height&-webkit-column-count

/sf/answers/1448417421/

DEMO

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/