Question

我有大量的内容，这些内容构成了html标签或纯文本。

我有几个div。

当第一个div不能包含所有内容时，如何将剩余内容自动填充到其他div。

非常感谢有任何建议。：）

---更新---

实际上，我制作了自己的博客，其设计类似于包含所有帖子的已打开的书籍（左页和右页）。

每个帖子都写有markdown文件。最初，一个帖子只有一个左页。

当mardown文件解析为html代码时，我会尝试将结果html代码插入到左侧页面＆＃39;我书中的帖子。

显然，如果结果html代码很大，那么就会有一个左页＆＃39;不可能包含所有内容。在这种情况下，我的博客会自动创建一个新的正确的页面（或其他＆＃39;左页＆＃39;当＆＃39;右页＆＃39;剩下的内容应该自动填充;

我要问的是我如何能够检测到我的左页＆＃39; div不足以包含所有结果html代码。如何剪切剩余内容并插入右页＆＃39;。我完全不知道如何达到此请求。

所以，如果有人之前已经这样做了，也许你可以给我一些提示。我会非常感激

Answer 1

再次编辑： 好吧，我将用纯CSS制作它。你在评论中问我的是一个普通的帖子（在左侧），如果左侧的帖子无法容纳所有内容，那么在右侧显示的帖子副本可以容纳所有的内容旧左侧的原始内容。

这是我从你给我的信息中理解的。

@media (min-width: 601px) {
  #leftSide {
    float: left;
  }
  /*THIS IS ON THE LEFT SIDE*/
  h2 {
    font-size: 2.5em;
  }
  p {
    font-size: 1.5em;
  }
  #rightSide {
    display: none;
  }
}
@media (max-width: 600px) {
  #rightSide {
    display: block;
    float: right;
  }
  /*THIS IS ON THE RIGHT SIDE*/
  h2 {
    font-size: 1.5em;
  }
  p {
    font-size: 1em;
  }
  #leftSide {
    display: none;
  }

<div id="leftSide">
  <h2>Post 1</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post 2</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post 3</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
</div>

<div id="rightSide">
  <h2>Post #1</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post #2</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post #3</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
</div>

Answer 2

Here回答像你这样的问题。

我认为你可以将你的文字分成几段，每一个都有一定数量的字符，但不会删掉任何单词。然后你可以把第一段放在第一页，第二段放在第二页，依此类推...... 主要的问题是修剪你的BigText而不削减任何单词，这里我在另一篇文章中找到的解决方案有帮助。

var yourBigText = "CULIACAN, Mexico The Joaquin El Chapo Guzman story could hardly have seemed more unbelievable, with its multiple prison breaks, endless sewers and tunnels, outlandish sums of money and feverish manhunts. And then Sean Penn entered the story.While Guzman was the world's most-wanted fugitive, dodging Mexican military operations and U.S. Drug Enforcement Administration surveillance, he was secretly meeting with the Hollywood movie star in an undisclosed Mexican hideout and has now provided what appears to be the first public interview of his drug-running career, published Saturday by Rolling Stone."; //replace with your big text.
var cutLength;
var remainText = yourBigText.length;
var maxLength = 60;

while (remainText != 0) {


    if (remainText >= maxLength) {

        var trimmedText = yourBigText.substr(0, maxLength);

        //re-trim if we are in the middle of a word
        trimmedText = trimmedText.substr(0, Math.min(trimmedText.length, trimmedText.lastIndexOf(" ")));

        //subtract from the original big string the length of the trimmedText
        cutLength = trimmedText.length;


        if (yourBigText.length > cutLength) {
           yourBigText = yourBigText.slice(cutLength); 
        }

        document.write(trimmedText);
        document.write('<br>');

    } else {
        document.write(yourBigText);
        exit();
    }
    remainText = yourBigText.length;
}

我希望这会有所帮助。

自动填充包含大量内容的div

2 个答案: