javascript - 按行而非字符 chop 段落

Question

我的 div 中有多个带有段落的项目，我想将它们 chop 为 2 行。我尝试使用高度进行 chop ，但结果会导致单词被 chop 。我无法使用字符，因为在某些情况下单词很长并且会被推到新行。

我正在尝试使用 getClientRects()，正如您将在下面的 fiddle 中看到的那样。另请注意，我无法对我正在处理的项目使用任何插件。

我在另一篇文章中找到了这个示例:Working Truncate来自stackoverflow post

我的 fiddle : JS Fiddle

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

Answer 1

有很多问题。

• 您尝试使用的代码利用了与display: inline相关的怪癖。但你没有设置 display: inline ，而不是留下.truncate浏览器默认为display: block .
• ready不是一个真实的事件，并且 jQuery 在使用 .on('ready', ...) 时不再伪造它所以你的代码永远不会运行。
• jQuery 的 .height()要求参数采用 CSS 高度值的形式。这意味着您需要使用一些结果，例如 '50px'而不仅仅是50 .
• height在内联元素上被忽略，因此必须在外部元素上设置它。您正在使用的代码执行了此操作，但您没有遵循它。
• 您的代码假定行数始终为两行或更多。
• overflow: hidden未设置，因此即使容器被缩短，文本本身也会被推到容器之外。

总而言之，您的代码应该如下所示:

.item {
  width: 400px;
  margin: 20px;
  display: inline-block;
  overflow: hidden;
  box-sizing: content-box;
}
.truncate {
  display:inline;
}

$(document).ready( function(){
    var lines = $(".truncate")[0].getClientRects();
    var divHeight = 0;
    var max = lines.length >= 2 ? 2 : lines.length;

    for (var i=0; i < max; i++) {
        divHeight += lines[i].bottom - lines[i].top;
    }

    divHeight += i;

    $(".item").height(divHeight + 'px');
});

JSFiddle