Transfer the overflowing content from one div to another

Aishwarya Shiva

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>

Ahed Kabalan

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

Collected from the Internet

Please contact [email protected] to delete if infringement.