javascript 如何仅显示 div 的前几行（钳位）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20792639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display only the first few lines of a div (clamping)?
提问by Sylvain
I have a list of divsin 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/
我有一个列表，divs其中显示较长文档的预览。这些文档使用不同的字体样式。所以我没有固定的行高。这是一个例子：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-heightof 300px to the divs, then depending on text properties (size, padding, margin) the bottom of last line gets clipped.
我只需要显示每个文档的前几行。我们已经确定 300px 是正确的。如果我只是max-height为 div设置300px 的a ，那么根据文本属性（大小、填充、边距），最后一行的底部会被剪裁。
How can I set a max-heightfor each block that will be close to 300px but that will not cause clipping?
如何max-height为每个接近 300 像素但不会导致剪裁的块设置一个？
The solution can use CSS, Javascript and jQuery.
该解决方案可以使用 CSS、Javascript 和 jQuery。
Those two questions are similar but their solutions assume a constant line height.
这两个问题很相似，但他们的解决方案假设行高不变。
回答by cocco
The algorithm to calculate all the factors perfectly using only javascript would be too complex.
仅使用 javascript 来完美计算所有因素的算法太复杂了。
With css3 there is line-clamp
使用 css3 有线夹
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.
这允许您在添加 3 个点之前设置要显示的行数。
now you want 300px... so:
现在你想要 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;
so this gives you an element that is 300px or less
所以这会给你一个 300px 或更小的元素
DEMOS
演示
NEEDED VALUES: line-height
需要的值： 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.
现在，如果您想让盒子的高度恰好为 300 像素，只需为段落添加边距或填充。但这取决于您的喜好。
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.
每个通过计算单词在末尾添加 3 个点的 js 函数都将是资源密集型的，以应用于现实世界的网站。
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 differentway to display partial content.
Using max-height & -webkit-column-count
这是显示部分内容的不同方式。使用最大高度 &-webkit-column-count
https://stackoverflow.com/a/20691677/2450730
https://stackoverflow.com/a/20691677/2450730
DEMO
演示
the support is slightly higher than line-clampand you are abe to display the whole content.
支持率略高于line-clamp，您可以显示全部内容。
EDIT2
编辑2
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
编辑3
fading image old browsers (use real images links, not base64)
旧浏览器褪色图像（使用真实图像链接，而不是 base64）
回答by Jason
One alternative is to use the dotdotdotjQuery plugin.
一种替代方法是使用dotdotdotjQuery 插件。
Its used like
它的使用就像
$("div.text_element").dotdotdot({
ellipsis : "...",
wrap : "word"
});
This way, you can just concern yourself with the div dimensions rather than line height or other CSS attributes. Also, it allows you to trigger events to show and hide the hidden text.
这样，您可以只关心 div 尺寸而不是行高或其他 CSS 属性。此外，它还允许您触发事件以显示和隐藏隐藏文本。
回答by Igor ?ar?evi?
You should look for line clamping techniques
你应该寻找线夹技术
A list of them can be found here http://css-tricks.com/line-clampin/
可以在此处找到它们的列表http://css-tricks.com/line-clampin/
As you can see the above link explains various methods to achieve line clamping, but only one of them is truly a cross browser solution. There seems to be a javascript library that solves this problem exactly, and it works even if you use various font sizes or styles
正如您所看到的，上面的链接解释了实现线钳制的各种方法，但只有其中一种是真正的跨浏览器解决方案。似乎有一个 javascript 库可以准确地解决这个问题，即使您使用各种字体大小或样式也能正常工作
Clamp.js [ https://github.com/josephschmitt/Clamp.js]
Clamp.js [ https://github.com/josephschmitt/Clamp.js]
Here is an example
这是一个例子
var paragraph = document.getElementById("myParagraphId");
$clamp(paragraph, {clamp: 3});
回答by JCOC611
You could definitely use Clamp.js, which is a JavaScript plugin created by Joseph Schmitt. The minified version of the code can be found here.
您绝对可以使用Clamp.js，它是 Joseph Schmitt 创建的 JavaScript 插件。可以在此处找到代码的缩小版本。
You could then use it like this:
然后你可以像这样使用它：
var elem = document.getElementsByTagName("div");
for(var z=0;z < elem.length; z++){
$clams(elem[z], {clamp: '300px'});
}
Alternatively, you could use getElementsByClassNameif not all your <div>s needed clamping.
或者，getElementsByClassName如果不是所有<div>需要的夹紧，您可以使用。
回答by Onur Topal
Here what I would do in this case;
在这种情况下我会怎么做；
First we have to get the div and find out the line-height so I am assuming you got your div as jQuery object.
首先，我们必须获取 div 并找出行高，所以我假设您将 div 作为 jQuery 对象。
var $divToClamp = $("#");
var $cloneDiv = $divToClamp.clone();
$divToClamp.insertAfter($cloneDiv.html("A"));
// created a new div as same place with the div to get same css, from parents, class etc.
// i don t know how jQuery handles the ids you must check that
var lineHeightToClamp = $cloneDiv.height() * 3;
$cloneDiv.remove();
// remove the clone we are done with it this does not work create clone div as fixed position back of the actual div and visibility hidden (not display:none)
//now we now the line-height for 3 lines set the css
$divToClamp.css({
overflow : "hidden",
lineHeight: lineHeightToClamp
});
some thing similar to this should fix you case but there might be some exceptions like margin of the div i am not sure $cloneDiv.height() includes them or not.
与此类似的事情应该可以解决您的问题，但可能有一些例外，例如 div 的边距我不确定 $cloneDiv.height() 是否包含它们。
also if there is another element (like span) in your div with different css that will also change the situation.
此外，如果您的 div 中有另一个元素（如跨度），使用不同的 css 也会改变情况。
Hope this helps.
希望这可以帮助。
