merging paragraphs with js

by techsin

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat distinctio reiciendis accusamus. Explicabo sequi exercitationem alias architecto quidem possimus natus doloremque excepturi fugit iusto sed perspiciatis cumque officia illo molestiae.</p>

<p>Inventore laboriosam id aliquam mollitia quas nemo qui vitae labore aspernatur nostrum saepe optio architecto error incidunt ipsum. Deserunt nobis sit esse doloribus qui dignissimos illum unde veniam reprehenderit aliquid.</p>

<p>Optio cumque asperiores voluptatibus quas et perferendis nisi necessitatibus vitae eaque ullam nostrum ex sed fugit excepturi debitis natus veniam dolore repudiandae tempora libero nihil eos blanditiis minus nesciunt consequatur!</p>

<p>Provident sequi quo mollitia incidunt aut unde in voluptatum nemo tempore officia magnam ducimus expedita asperiores eveniet ratione ab vero earum sed quia praesentium voluptatibus iste sit atque necessitatibus deleniti!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat distinctio reiciendis accusamus. Explicabo sequi exercitationem alias architecto quidem possimus natus doloremque excepturi fugit iusto sed perspiciatis cumque officia illo molestiae.</p>

<p>Inventore laboriosam id aliquam mollitia quas nemo qui vitae labore aspernatur nostrum saepe optio architecto error incidunt ipsum. Deserunt nobis sit esse doloribus qui dignissimos illum unde veniam reprehenderit aliquid.</p>

<p>Optio cumque asperiores voluptatibus quas et perferendis nisi necessitatibus vitae eaque ullam nostrum ex sed fugit excepturi debitis natus veniam dolore repudiandae tempora libero nihil eos blanditiis minus nesciunt consequatur!</p>

<p>Provident sequi quo mollitia incidunt aut unde in voluptatum nemo tempore officia magnam ducimus expedita asperiores eveniet ratione ab vero earum sed quia praesentium voluptatibus iste sit atque necessitatibus deleniti!</p>

CSS

div{
    border: 1px solid;
    position: relative;
    overflow:hidden;
}
* { margin: 0; padding: 0; }

JavaScript

var $p=$('p'), sum=0, x=100, n, mId, w, inDivs;

$p.wrapAll('<div id="new"/>');
mId= $('#new');
sum= mId.height();
console.log(sum);

$p.remove();
n= Math.ceil(sum/x);


w=n;
while(w) {mId.append($("<div class='sec'></div>")); w--;}
inDivs = $('.sec');
inDivs.css('height',x+'px').append($p)
    .each(function(){
        var t = $(this);
        $(":first-child", t).css('margin-top', '-'+t.position().top+'px');
        console.log(t.position().top);
    });