如何仅显示 div 的前几行（钳位）？答案

【问题标题】：How to display only the first few lines of a div (clamping)?如何仅显示 div 的前几行（钳位）？
【发布时间】：2013-12-26 23:29:50
【问题描述】：

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

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

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

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

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

【问题讨论】：

您需要包括所有因素：字体大小、行高、字符宽度、容器宽度/高度等，然后计算保证适合的最大字符数。
Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?的可能重复
相关stackoverflow.com/questions/6222616/…

标签： javascript jquery html css

【解决方案1】：

仅使用 javascript 完美计算所有因子的算法过于复杂。

css3有line-clamp

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

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/

需要的值：line-height

现在，如果您想让框的高度正好为 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/

【讨论】：

您写道：“仅使用 javascript 会太复杂”。这里的“太复杂”是什么意思？
在低cpu设备上计算每个div需要1秒或更长时间。而且这个功能基本上是不可能的，因为每个浏览器显示的字体都不同。
您的-webkit-line-clamp 演示不代表我的用例，因为在您的演示中，每个文档（您表示为<p>）都有一个常量line-height。这是一个更接近我的用例的示例：jsfiddle.net/MM29r/4
哦，所以你在每个 p（或 div）中都有不同的字体大小。是的，这让一切都变得更难了。您需要将该计算应用于每个 p（或 div）内的每个元素，并对这些值求和，并根据剩余空间仅将钳位添加到最后一个元素。
为旧版浏览器添加了褪色图像。

【解决方案2】：

另一种方法是使用dotdotdot jQuery 插件。

它的用法

$("div.text_element").dotdotdot({
  ellipsis : "...",
  wrap : "word"
});

这样，您可以只关注 div 的尺寸而不是行高或其他 CSS 属性。此外，它还允许您触发事件以显示和隐藏隐藏的文本。

【讨论】：

dotdotdot 是唯一一个在所有浏览器中对我有用的（固定高度的容器，里面有一个长链接）。

【解决方案3】：

你应该寻找线夹技术

可以在此处找到它们的列表http://css-tricks.com/line-clampin/

如您所见，上面的链接解释了实现线夹的各种方法，但其中只有一种是真正的跨浏览器解决方案。似乎有一个 javascript 库可以准确解决这个问题，即使您使用各种字体大小或样式也可以正常工作

Clamp.js [https://github.com/josephschmitt/Clamp.js]

这是一个例子

var paragraph = document.getElementById("myParagraphId");

$clamp(paragraph, {clamp: 3});

【讨论】：

+1... 但是您确实应该在链接中包含技术摘要。它将防止您的链接出现故障，并允许 S.O.用户无需离开现场即可找到答案......这也许就是为什么在我写这篇评论时其他人只是对你投了反对票。
如果链接失效，你的帖子就没用了。
他在问题上命名这一简单事实很有帮助（钳制）。

【解决方案4】：

您绝对可以使用Clamp.js，这是一个由 Joseph Schmitt 创建的 JavaScript 插件。代码的缩小版可以在here找到。

你可以这样使用它：

var elem = document.getElementsByTagName("div");

for(var z=0;z < elem.length; z++){
  $clams(elem[z], {clamp: '300px'});
}

或者，如果不是所有 <div>s 都需要夹紧，您可以使用 getElementsByClassName。

【讨论】：

【解决方案5】：

在这种情况下我会怎么做；

首先我们必须得到 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
    });

与此类似的事情应该可以解决您的问题，但可能会有一些例外情况，例如 div 的边距，我不确定 $cloneDiv.height() 是否包含它们。

如果您的 div 中有另一个元素（如 span）具有不同的 css，也会改变这种情况。

希望这会有所帮助。

【讨论】：