Question

我必须将长文本拆分成多个框。我真的不知道如何做到这一点。为了更好地理解，这里有两个例子。 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

如果您需要分页，只需计算滚动所需的文字数量：

＆＃13;

/**
 * @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));
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

.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>

在多个框中自动拆分文本

2 个答案: