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

Question

I am checking a div for vertical overflow of content using this JS code:

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

But how can I remove the content that is overflowing and transfer it to another div ?

Here's the 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

Get started with such code:

 $.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>

Reference Here