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

Question

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

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

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

这是小提琴：https://jsfiddle.net/appsoln/fnecb7mL/6/

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

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

Answer 1

开始使用这样的代码：

\n\n

\r\n

\r\n

$.fn.renderedText = function(){\r\n  var o = s = this.text();\r\n  while (s.length && this[0].scrollHeight >  this.innerHeight()){\r\n    s = s.slice(0,-1);\r\n    this.text(s+"\xe2\x80\xa6");\r\n  }\r\n  this.text(o);\r\n  return o.replace(s, "");\r\n};\r\n\r\nif ($("#div1").prop(\'scrollHeight\') > $("#div1").outerHeight()) {\r\n  $("#div2").html($(\'#div1\').renderedText());\r\n} else {\r\n  alert("this element is not overflowing!!");\r\n}

\r\n

#main {\r\n  background-color: blue;\r\n  padding: 15px;\r\n}\r\n\r\n#div1 {\r\n  padding: 20px;\r\n  background-color: yellow;\r\n  margin: 10px;\r\n  width: 200px;\r\n  max-height: 100px;\r\n  overflow: hidden;\r\n}\r\n\r\n#div2 {\r\n  padding: 20px;\r\n  background-color: green;\r\n  margin: 10px;\r\n  width: 200px;\r\n  max-height: 300px;\r\n  color: white;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

参考这里

\n