Javascript 按行而非字符截断段落

我在一个div中有多个带有段落的项，我想将它们截断为两行。我曾尝试使用高度来截断，但结果是截断了单词。我不能使用字符，因为在某些情况下，单词很长，会被推到新行

我正在尝试使用getClientRects（），您将在下面的提琴中看到这一点。 还要注意的是，我不能为我正在进行的项目使用任何插件

我在另一篇帖子上找到了这个例子：from

我的小提琴：

var lines=$（“.truncate”）[0].getClientRects（）；
var-divHeight=0；
对于（变量i=0，max=2；i

使用css技巧（）中的css答案，假设您知道行高

.item{
宽度：400px；
利润率：20px；
溢出：隐藏；
}
.褪色{
位置：相对位置；
高度：2.4em；/*正好两行*/
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

有很多问题

• 您试图使用的代码利用了与

  display:inline

  相关的一个怪癖，但您没有设置

  display:inline

  ，而是将

  .truncate

  保留在浏览器默认的

  display:block

• ready

  不是真正的事件，jQuery在（'ready'，…）上使用

  .on时不再伪造它，因此您的代码永远不会运行

• 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;
}

$（文档）.ready（函数（）{
变量行=$（“.truncate”）[0]。getClientRects（）；
var-divHeight=0；
var max=lines.length>=2？2:lines.length；
对于（变量i=0；i

---

以下是css创意技巧的一页。最初于2013年，但于2018年9月更新。非常感谢！这太棒了！如何修改此选项以向被截断的项目添加省略号？@Mandalina通常在包装文本的元素上使用

text overflow:ellipsis

。然而，您的场景会阻止它工作。你最好把如何完成这个问题作为一个单独的stackoverflow问题来问。嘿@Ourobrus，我试过了，但它似乎只适用于一行截断。

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