複数のボックスに自動的にテキストを分割する

Question

長いテキストを複数のボックスに分割する必要があります。そして、私はこれをどうやってできるのか本当に分かりません。ここでの理解のために2つの例があります。 Beforeおよびafter。長いテキストは1-x（無限）ボックスに分割し、オーバーフローがないようにする。 olとulのようなリストは、常に一緒にとどまるべきです。 Pタグを分割することができます。

私の最後の解決策は、すべての要素をボックスに入れて、高さが私が望む以上に高くない場合は常にjavascriptでチェックすることです。そうでなければ新しいボックスを作成します。

var box_height = 450; 
var x = 1; 

$("#startbox > *").each(function() { 
    if(x === 1) { 
     addPage(this); 
    } else { 
     $(this).appendTo("#list_pages .box.active"); 
     if($("#list_pages .box.active").height() > box_height) { 
      addPage(this); 
     } 
    } 

    x++; 
}); 

function addPage(item) { 
    "use strict"; 
    var old_item = $("#list_pages .box.active"); 
    var clone = $("#clone_page").clone(); 
    $("#list_pages .box.active").removeClass("active"); 
    clone.removeClass('hide').addClass('active').removeAttr("id"); 
    clone.appendTo("#list_pages"); 
    $(item).appendTo('#list_pages .page.active'); 
} 

編集：私は本当に複数のdivで分割する必要があります。後で印刷するなど。たとえば、Google Docsは良い例です。最大に達すると自動的に新しいページが作成されます。

Answer 1

.splitter { 
 
    float: left; 
 
    width: 100%; 
 
    height: 100px; 
 
    border-top: 50px solid white; 
 
    border-bottom: 50px solid white; 
 
    background: red; 
 
} 
 

 
.spacer{ 
 
    display: block; 
 
    float: left; 
 
    width: 1px; 
 
    height: 300px; 
 
}

<div> 
 
<div class="spacer"></div> 
 
<div class="splitter"></div> 
 
<div class="spacer"></div> 
 
<div class="splitter"></div> 
 
<div class="spacer"></div> 
 
<div class="splitter"></div> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec magna consectetur, iaculis ex ut, blandit eros. Duis eget lorem justo. Ut id auctor ex, vitae fringilla est. Donec eget vestibulum purus. Proin sed elit leo. Vivamus nec faucibus purus, at viverra turpis. Aenean porttitor vehicula nibh, at sagittis purus blandit nec. Fusce elit arcu, egestas sit amet justo quis, condimentum hendrerit sapien. Praesent ultricies porta accumsan. Suspendisse ultricies nec libero id finibus. Duis feugiat velit at efficitur viverra. Mauris venenatis mi dapibus volutpat luctus. In sit amet elit eget turpis placerat ullamcorper in in risus.</p> 
 

 
<p>Duis ut purus at felis consectetur sollicitudin. Morbi dignissim leo sed erat luctus, efficitur placerat purus vestibulum. Maecenas finibus ultrices sem, ut semper massa aliquet nec. Vestibulum varius, nisi vitae dignissim tempus, augue sem malesuada ligula, a cursus quam quam vel mi. Suspendisse malesuada sapien erat, nec imperdiet purus malesuada vitae. Donec fermentum maximus libero at fringilla. Quisque dictum nisi in eros posuere finibus at bibendum ligula.</p> 
 

 
<p>Pellentesque suscipit sagittis sodales. Donec luctus elementum augue ac maximus. Nullam at arcu dui. Sed porttitor pretium ante, sit amet consequat mi laoreet id. Suspendisse eget ante lectus. Duis nec porttitor nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p> 
 

 
<p>Ut eget sem libero. Nulla facilisi. Nunc euismod ex cursus porta scelerisque. Aliquam id augue at magna semper posuere. Phasellus dui augue, scelerisque eget erat vitae, pharetra dictum lorem. Morbi hendrerit venenatis diam, eu fermentum diam volutpat non. Nullam venenatis at metus quis ultricies. Nullam sed rhoncus metus, non efficitur sapien. Curabitur in viverra libero. Ut id tortor malesuada diam pellentesque malesuada facilisis non nisi. Sed auctor sapien non dapibus consectetur. Maecenas lobortis, dolor eu malesuada scelerisque, felis sapien sagittis enim, eu placerat dui sem sagittis ex.</p> 
 

 
<p>Nullam feugiat commodo odio a tincidunt. Maecenas sit amet lobortis est. Aenean auctor aliquet lorem. Praesent tincidunt, nunc et finibus viverra, mi tortor auctor libero, non rhoncus massa mauris convallis lorem. Aenean malesuada mauris vitae euismod pellentesque. Nullam neque ipsum, vulputate nec vehicula sit amet, pellentesque non lorem. Ut ultrices lacinia justo vel mattis. Sed dapibus suscipit suscipit.</p> 
 

 
<p>Pellentesque quis facilisis magna, sed vehicula arcu. Donec accumsan nisl sit amet arcu rutrum, in malesuada risus egestas. Nam fermentum ante vel tempus congue. Aliquam ullamcorper dictum nisi quis rutrum. Morbi semper dui non velit imperdiet, vitae pellentesque dui tempor. Morbi libero lorem, hendrerit rutrum odio ullamcorper, gravida dignissim nunc. In hac habitasse platea dictumst. Ut rhoncus congue enim vel commodo. Integer ultricies tellus in turpis aliquam, ut vehicula metus viverra. Morbi posuere lacinia arcu, ut ullamcorper sem semper eget. Nulla et nibh lectus. Mauris viverra fermentum ligula, nec tempor felis sodales id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi maximus enim ut porttitor sollicitudin. Vestibulum leo purus, dignissim non maximus ac, commodo ut elit.</p> 
 

 
<p>Vestibulum rutrum libero id urna fringilla consectetur. Quisque et consectetur lorem, at pharetra metus. Curabitur sollicitudin aliquam tortor non fermentum. Morbi a mattis purus. Donec erat ante, rhoncus non felis sed, lacinia ornare libero. Phasellus vestibulum neque turpis, eu tincidunt nisl maximus vitae. Donec dapibus felis non magna lacinia cursus. In quis blandit quam, ut convallis tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur, risus cursus fermentum placerat, arcu sapien fermentum lectus, vitae maximus nisl diam nec sapien. Etiam sed tellus ac purus iaculis consequat quis id ante. Curabitur elementum luctus congue. Nulla elementum gravida nulla, sit amet auctor tellus volutpat at. Curabitur tincidunt tempus orci, quis ornare purus blandit vel. Morbi euismod urna in dolor eleifend, id eleifend urna malesuada. Fusce sed facilisis enim.</p> 
 

 
<p>Maecenas semper sit amet tortor eget mollis. Praesent id tempor mi, sit amet posuere metus. Nulla justo augue, venenatis in ex faucibus, feugiat condimentum mi. Nullam facilisis vestibulum metus, eget tincidunt enim convallis eget. Nunc congue sapien ut ante varius lobortis. Nullam ac lacinia nisl. Etiam leo lectus, faucibus varius varius eu, cursus eget purus. Curabitur sodales, metus sed luctus consectetur, eros turpis cursus risus, a tincidunt est lectus et lacus.</p> 
 
</div>

Answer 2

あなたは改ページを持っている必要がある場合は、単にあなたがスクロールする必要がどのくらいのテキストを計算：

/** 
 
* @TODO: 
 
* 1. Make scrolling size dynamic 
 
* 2. Recalculate values on page resize 
 
* 3. Do not scroll pass max/min values 
 
*/ 
 
$(document).ready(function() { 
 
    var page = $('#page'); 
 
    var wrapper = $('#page > .wrapper'); 
 
    var currentPage = 1; 
 
    var total = Math.ceil(wrapper.height()/page.height()); 
 
    $('#totalPages').text(total); 
 
    $('#currPage').text(currentPage); 
 

 
    $(document).on('click', '#next', function() { 
 
    wrapper.css({'top': '-=200'}); 
 
    $('#currPage').text(Math.max(1, parseInt($('#currPage').text()) + 1)); 
 
    }); 
 

 
    $(document).on('click', '#prev', function() { 
 
    wrapper.css({'top': '+=200'}); 
 
    $('#currPage').text(Math.min(total, parseInt($('#currPage').text()) - 1)); 
 
    }); 
 
});

#page { 
 
    width: 400px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    border: 1px solid #ddd; 
 
} 
 

 
#page .wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    top: 0; 
 
    transition: top 500ms ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="prev">&lt;</button><button id="next">&gt;</button> | 
 
<span id="currPage"></span>/<span id="totalPages"></span> 
 
<div id="page"> 
 
<div class="wrapper"> 
 
Lorem ipsum dolor sit amet, te his invenire mnesarchum, ex iisque voluptua interpretaris vel. Ea populo inimicus perpetua nam, vim suscipit legendos vituperata no, expetendis liberavisse ad ius. Sea alterum expetendis cu, an vis putent noster animal, pertinax intellegat voluptatum ut est. Id his minim timeam saperet, sit at case regione nusquam. Sea an accusata postulant periculis, sonet vivendo et eos, magna diceret vix eu. Modo suas salutandi qui in, no platonem electram mei. Omnis commodo propriae cum in, ne sea fastidii copiosae reprimique, sit noster vulputate eu. 
 

 
Nisl persequeris his ea. Mea mollis dolorum reformidans at, doming euismod laoreet vix no. Cu malis populo iuvaret has. Possit pertinacia quo at, nec no vero dicunt torquatos, possim melius admodum in est. Vitae verterem tacimates vix ex, falli menandri pericula et sit. 
 

 
Ex vix veritus epicuri tacimates. Usu id scripta vituperata intellegebat. Sint dissentiet et his, enim sapientem at nam. Pri ne agam abhorreant, timeam delectus in eum. Pro ea postea quodsi, et equidem atomorum eam. 
 

 
At his ipsum essent, singulis laboramus et est, ex vis diam perfecto. Singulis repudiandae usu eu. Modo dolorum id vis. Illum lucilius et cum, eum alii minimum tractatos eu. Ex eum quem clita possim. Has te quod torquatos conclusionemque. 
 

 
Usu no omnes everti. An euismod senserit intellegat qui, ea per solet labore commune. An nam aliquip volumus probatus, eam autem atomorum assueverit no, mazim euismod repudiare mei no. Eruditi oporteat phaedrum usu in, debet percipitur ea has. No per iudico suscipit. Ad mel unum disputando, no dolore numquam duo. 
 
</div> 
 
</div>