javascript - 根据 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;
}