根据 div 的可用高度显示省略号

Question

我在父 div 中有两个 div“div1”和“div2”。 div 1 与 div2 碰撞。发生这种情况时，我希望 div1 中的文本打断单词，占据 div2 顶部的空间，然后显示省略号。

我可以找到 div 是否发生冲突：http://jsfiddle.net/nGRwt/327/

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

我想把上面的图片改成：

我想我必须计算 div1 的剩余高度，使用 css 设置高度，然后使用 javascript 应用省略号。但我不擅长计算，也没有像图 2 那样成功实现上述目标。

如何实现：使文本使用可用空间，然后显示省略号。

Answer 1

你可以这样做：-

#div1 {
width: 200px;
height: 43px;
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}

Answer 2

在您的#div1 中，请更新您的 css

#div1 { 
    width: 200px;
    height: 40px; /* You can specify whatever you want */
    background-color: pink; 
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

碰撞功能

function collision() {
    $("#div1").css("height", $("#div1").height() + ($("#div2").height() - $("#div1").height()));
}

HTML，请删除

br 元素