如何只显示div的前几行（夹紧）？ [英] How to display only the first few lines of a div (clamping)?
问题描述
我有一个 divs 的列表，其中显示较长文档的预览。文档使用不同的字体样式。所以我没有一个恒定的线高度。以下是一个示例： http://jsfiddle.net/z56vn/
我只需要显示每个文档的前几行。我们已经确定300px是正确的。如果我只是设置一个 max-height 300px到div，然后根据文本属性（大小，填充，边距）最后一行的底部被裁剪。
如何为每个块设置一个 max-height ，它将接近300px，但不会导致裁剪？ / p>
解决方案可以使用CSS，Javascript和jQuery。
这两个问题是类似的，但是他们的解决方案假定了一个不变的线高度。
使用javascript完全计算所有因子的算法太复杂了。 b
使用css3有线夹
但这只适用于现代浏览器。 b
$ b
p {
margin：20px;
overflow：hidden;
text-overflow：ellipsis;
display：-webkit-box;
-webkit-line-clamp：3;
-webkit-box-orient：vertical;
}
DEMO
这样，您可以在添加3个点之前设置要显示的行数。
现在您需要300像素... ：
var p = document.getElementsByTagName（'p'）[0]，
lineheight = parseInt getComputedStyle（p）.getPropertyValue（line-height））;
var lines = Math.floor（300 / lineheight）;
p.style [' - webkit-line-clamp'] = lines;
因此，这个元素为300px或更小。
DEMOS
需要的值： line-height
现在，如果你想让盒子的高度刚好为300像素，那么只要在段落中添加边距或者padding就可以了。
$ $ p $
< b
$ b
每个js函数，通过计算字词在结尾添加3个点将是资源密集型应用在现实世界的网站。
一个更好的方法是每次计算一个段落并将夹紧的结果添加到db或存储在静态网站。
但是每个浏览器都会显示
这是一个
不同的方式显示部分内容。使用max-height&
-webkit-column-count http://stackoverflow.com/a/20691677/2450730
DEMO
支持稍微高于 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;
}
EDIT3
退化图片旧浏览器（使用真实图片链接，而不是base64）
I have a list of divs in which I display the preview of longer documents. The documents use varying font styles. So I don't have a constant line height. Here is an example: http://jsfiddle.net/z56vn/
I need to only show the first few lines of each document. We've determined that 300px is about right. If I simply set a max-height of 300px to the divs, then depending on text properties (size, padding, margin) the bottom of last line gets clipped.
How can I set a max-height for each block that will be close to 300px but that will not cause clipping?
The solution can use CSS, Javascript and jQuery.
Those two questions are similar but their solutions assume a constant line height.
The algorithm to calculate all the factors perfectly using only javascript would be too complex.
With css3 there is line-clamp
But this works only on modern browsers.
p{
margin:20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
DEMO
this allows you to set the number of lines you want to display before adding the 3 dots.
now you want 300px... so:
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;
so this gives you an element that is 300px or less
DEMOS
NEEDED VALUES: line-height
Now if you want to make the box exactly 300px height just add margins or paddings to the paragraphs.But that depends on your preferences.
if you have some questions just ask.
Note
every js function that adds 3 dots at the end by calculating the words would be to resources intensive to apply in a real world website.
a better approach would be to calculate every paragraph one time and add the clamped result to a db or store it in the static website.
but then again every browser displays fonts in a different way.
EDIT
Here is a different way to display partial content.
Using max-height & -webkit-column-count
http://stackoverflow.com/a/20691677/2450730
DEMO
the support is slightly higher than line-clamp and you are abe to display the whole content.
EDIT2
Fading image at the bottom.
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;
}
EDIT3
fading image old browsers (use real images links, not base64)
这篇关于如何只显示div的前几行（夹紧）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
