Auto-populate divs with overflow text

HTML

<script src="http://fonts.googleapis.com/css?family=Handlee"></script>
<script src="http://fonts.googleapis.com/css?family=Calligraffitti"></script>
<div class="heading">
    <div class="heading1">Auto-populate divs w/overflow text</div>
    <div class="subheading1">March 2014</div>
    <div class="date">March 14th 2014</div>
</div>
<div class="box" id="col1">
    <p>&nbsp; Webtwo ipsum dolor sit amet, eskobo chumby doostang bebo. Oooooc eskobo loopt divvyshot scribd zillow blippy loopt nuvvo babblely klout shopify twones insala cuil, shopify kiko yuntaa zapier jajah eskobo hulu lanyrd diigo convore chartly zooomr sclipo. Jajah unigo blekko lala zillow orkut jajah, chumby kosmix nuvvo vuvox jajah empressr lanyrd, plaxo plickers reddit whrrl waze. Dropio kiko voxy zanga rovio movity glogster disqus stypi ning, mozy kaboodle imvu octopart babblely insala oovoo mog spotify yammer, joyent udemy grockit omgpop cotweet tumblr udemy jiglu. Koofers knewton balihoo loopt chartly mozy prezi, oooooc stypi spotify knewton kippt.</p>
    <p>&nbsp; Joost mog kosmix kippt lanyrd jaiku movity oooooc spotify groupon chumby etsy mozy revver divvyshot jabber dropio, odeo groupon elgg whrrl ebay appjet eduvant jabber ebay lala greplin yammer sclipo kazaa. Whrrl doostang koofers klout rovio dogster ifttt heroku doostang voxy, wesabe qeyno chartly fleck dropio unigo chumby fleck twitter, zynga yammer tivo akismet twitter dopplr whrrl jumo. Skype qeyno oovoo vimeo quora mog meevee zanga scribd, loopt joyent cotweet airbnb zoho handango prezi, jabber hulu disqus squidoo eduvant zinch tivo. Dropio zappos zinch dropio kazaa, octopart xobni.</p>
    <p>&nbsp; Grockit sococo wakoopa kaboodle omgpop zlio meebo heekya insala yammer vuvox foodzie bitly, voxy reddit diigo edmodo appjet sclipo nuvvo kiko glogster imeem prezi, jiglu loopt rovio zappos elgg xobni flickr ifttt scribd eskobo sococo. Vimeo zoosk qeyno squidoo etsy stypi flickr balihoo ebay reddit wesabe flickr mozy, octopart sifteo...

CSS

body {
    background: #666;
}
.box {
    font-size: 1em;
    font-family:'Handlee', cursive;
    position: relative;
    width: 500px;
    height: 700px;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
    margin: 0 auto;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}
.box:empty {
    display:none;
}
.box > p:first {
  display: none;
}

.box:before, .box:after {
    position: absolute;
    width: 40%;
    height: 10px;
    content:' ';
    left: 12px;
    bottom: 12px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    z-index: -1;
}
.box:after {
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}
.heading {
    position: relative;
    width: 500px;
    padding: 50px;
    margin: 0 auto;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}
.heading:before, .heading:after {
    position: absolute;
    width: 40%;
    height: 10px;
    content:' ';
    left: 12px;
    bottom: 12px;
...

JavaScript

var currentCol = $('.box:first');
var text = currentCol.html();
currentCol.html('');
text = text.replace(/ (?![^<>]*>)/gi, '%^%');
var wordArray = text.split('%^%');



$.fn.hasOverflow = function () {
    var div = document.getElementById($(this).attr('id'));
    return div.scrollHeight > div.clientHeight;
};


for (var x = 0; x < wordArray.length; x++) {
    var word = wordArray[x];
    currentCol.append(word + ' ');
    if (currentCol.hasOverflow()) {
        currentCol = currentCol.next('.box');
    }
}