我有多个项目在一个div的段落,我想截断他们2行。我曾试图截断使用的高度,但它的结果在切断的话。我不能使用字符,因为在某些情况下,单词很长,并被推到一个新的行。
我正在尝试使用getClientRects(),正如您将在下面的小提琴中看到的那样。另外请注意,我不能使用任何插件的项目,我的工作。
我在另一篇文章中发现了这个例子:Working Truncate来自stackoverflow post
My Fiddle:February 2009
var lines = $(".truncate")[0].getClientRects();
var divHeight = 0;
for (var i=0, max = 2; i < max; i++)
divHeight += lines[i].bottom - lines[i].top;
divHeight += i;
$(".truncate").height(divHeight);
3条答案
按热度按时间kiayqfof1#
有很多问题。
display: inline
相关的一个怪癖,但您没有设置display: inline
,而是将.truncate
保留为浏览器默认值display: block
。ready
不是一个真实的事件,jQuery在使用.on('ready', ...)
时不再伪造它,因此您的代码永远不会运行。.height()
要求参数以CSS高度值的形式出现。这意味着您需要使用一些结果,例如'50px'
而不仅仅是50
。height
在内联元素上被忽略,因此必须在外部元素上设置。你所使用的代码做到了这一点,但你没有遵循它。overflow: hidden
没有设置,所以即使容器被缩短,文本本身也会推到容器外。总之,你的代码应该看起来像这样:
JSFiddle
mi7gmzs62#
使用css-tricks(https://css-tricks.com/line-clampin/)的css答案,假设你知道行高。
xhv8bpkk3#
你可以使用css行箝位并避免使用JavaScript:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
虽然它有供应商前缀,但似乎所有供应商都支持它。