javascript - 将溢出的内容从一个 div 转移到另一个 div

Question

我正在使用以下 JS 代码检查 div 内容的垂直溢出:

if ($("#col1").prop('scrollHeight') > $("#col1").outerHeight() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

但是如何删除溢出的内容并将其转移到另一个 div 上？

这是 fiddle :https://jsfiddle.net/appsoln/fnecb7mL/6/

if ($("#div1").prop('scrollHeight') > $("#div1").outerHeight()) {
  alert("this element is overflowing !!");
} else {
  alert("this element is not overflowing!!");
}

#main {
  background-color: blue;
  padding: 15px;
}

#div1 {
  padding: 20px;
  background-color: yellow;
  margin: 10px;
  width: 200px;
  max-height: 100px;
}

#div2 {
  padding: 20px;
  background-color: green;
  margin: 10px;
  width: 200px;
  max-height: 300px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="div1">
    TEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENT TEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENT
  </div>
  <div id="div2">

  </div>
</div>

Answer 1

开始使用这样的代码:

$.fn.renderedText = function(){
  var o = s = this.text();
  while (s.length && this[0].scrollHeight >  this.innerHeight()){
    s = s.slice(0,-1);
    this.text(s+"…");
  }
  this.text(o);
  return o.replace(s, "");
};

if ($("#div1").prop('scrollHeight') > $("#div1").outerHeight()) {
  $("#div2").html($('#div1').renderedText());
} else {
  alert("this element is not overflowing!!");
}

#main {
  background-color: blue;
  padding: 15px;
}

#div1 {
  padding: 20px;
  background-color: yellow;
  margin: 10px;
  width: 200px;
  max-height: 100px;
  overflow: hidden;
}

#div2 {
  padding: 20px;
  background-color: green;
  margin: 10px;
  width: 200px;
  max-height: 300px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="div1">
    TEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENT TEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENTTEST CONTENT
  </div>
  <div id="div2">

  </div>
</div>

引用Here