Split Div on Overflow

by Jason Crowther

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="note" class="box" style=" background-color: yellow; height: 35px; overflow: hidden;">this is a bunch of rambling text.  not really saying much of anything.  just filling up space. blah blah blah.  ok, here is more text.  this is kinda krufty, but kinda works. this is more impressive, if there's a lot of text to push out.</div>

<p class="continued" style="display:none">Continued below...</p>

<p><button id="splitTextBtn">Split Text</button></p>


<div class="continued" style="display: none">
<p>Continued...</p>
<div id="o2" class="box" style="300px; background-color: red"></div>
</div>

CSS

.box {
  padding: 10px;
   width: 300px;
}

JavaScript

$('#splitTextBtn').click(function(){
	var $t = $('#note');
  var max = $t.height() + 20 +1;
  
  if( $t.prop('scrollHeight') > max ) {

    var words = $t.text().split(/\s/);
		$t.empty();     
    var s = '';
     
    for( var a = 0, l = words.length; a < l; a++) {
     	var w = words.shift();
      var n = s + ' ' + w;
      $t.text(n);
      //console.log(n,$t.prop('scrollHeight'));
         if($t.prop('scrollHeight') > max ) 				{
         	$('#note').text(s);
          $('#o2').text( w + ' ' + words.join(' '));
          $('.continued').show();
          break;
         }
         s = n;
     }
     
  } else {
  	console.log('nope, no overflow here.')
  }

});