Question

我在一个div段落中有多个项目，我想将它们截断为2行。我试图使用高度截断，但结果是单词断断续续。我不能使用字符，因为在某些情况下，单词太长并被推到新的一行。

我正在尝试使用getClientRects（），如下面的小提琴所示。另外请注意，我不能为正在从事的项目使用任何插件。

我在另一则帖子中找到了这个示例：Working Truncate的stackoverflow post

我的小提琴： 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保留为浏览器默认设置{{ 1}}。
display: block不是一个真正的事件，jQuery在使用ready时不再伪造它，因此您的代码将永远无法运行。
jQuery的.on('ready', ...)要求参数采用CSS高度值的形式。这意味着您需要使用一些会导致产生结果的内容，例如.height()，而不仅仅是'50px'。
50在内联元素上被忽略，因此必须在外部元素上进行设置。您正在使用的代码做到了这一点，但是您没有遵循它。
您的代码假定行数始终为两行或更多。
height未设置，因此即使容器缩短了，文本本身也将被推入容器之外。

总的来说，您的代码应该看起来像这样：

overflow: hidden

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

JSFiddle

Answer 2

假设您知道行高，请使用css技巧（https://css-tricks.com/line-clampin/）中的css答案。

.item {
  width: 400px;
  margin: 20px;
  overflow: hidden;
}

.fade {
  position: relative;
  height: 2.4em; /* exactly two lines */
}

  <div class="item fade">
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
  </div>

  <div class="item fade">
   
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

逐行截断段落而不是字符

2 个答案: