javascript - 将内容从 1 个元素切换到下一个？

Question

比如说，我在一个页面上有 2 个 div 元素(让 div1 和 div2)。我正在动态获取内容。内容是文本，我希望内容填充 2 个 div 元素，这样当 div1 空间不足时，内容显示在 div2 中。打个比方，这就像在笔记本上工作，笔记本的整个表面就是页面，div1 和 div2 分别是左侧和右侧。页面的一侧完成后，您将转到下一页，依此类推。

其中一种方法可能是拆分文本并为每个 div 设置字数限制，这将导致从 div1 到 2 等等。

我看过分页，但我不想要它。

但是有没有更好的方法来实现这一点？也许喜欢使用 div 元素的高度属性来触发事件或类似的东西？或者有什么建议？

Answer 1

您可以使用此示例中的代码，它有 4 个固定大小的 div 元素，并排显示(参见 CSS)，所有文本都在第一个 分区。该代码将根据需要将文本重新分配到下一个 div(s) 以避免溢出:

$(function() {
    // Take all words from first div and let them overflow into any next div
    var allwords = $('div.box').text().split(/\s+/);
    $('div.box').each(function (index, div)  {
        var text = '';
        var $div = $(div);
        var height = Math.round($div.height());
        allwords.slice().some(function (part, i) {
            $div.text(text + (i ? ' ': '') + part); // try, and see what we get
            // Detect overflow: when so, exit loop
            if ($div.prop('scrollHeight') > height) return true;
            text = $div.text();
            allwords.shift();
        });
        // Restore text to last non-overflowing text
        $div.text(text);
    });
});

.box { width:100px; height:100px; border: 1px solid; display: inline-block; float: left }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque dui ut nisl iaculis faucibus. 
Mauris non diam consectetur metus accumsan sollicitudin. Quisque ornare euismod mi.
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>