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

我希望上面的图片更改为：

我想我必须使用css计算div1的剩余高度设置高度，然后使用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 element