Question

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

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

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

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

这两个问题是相似的，但他们的解决方案假设线高度恒定。

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;

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

<强> DEMOS

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

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

需要的价值：line-height

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

如果你有问题请问。

注意

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

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

然后每个浏览器再次以不同的方式显示字体。

修改

这是显示部分内容的不同的方式。使用max-height＆amp; -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/

Answer 2

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

用得像

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

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

Answer 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});

Answer 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'});
}

或者，如果不是所有getElementsByClassName都需要钳制，则可以使用<div>。

Answer 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也会改变这种情况。

希望这有帮助。

如何仅显示div的前几行（clamp）？

5 个答案: