Question

假设我有1000个单词的内容。我有100X100高度和宽度的多个div，如果需要，我可以创建相同高度和宽度的新div。我如何确定一个div的内容足够多，其余内容将被移动到下一个div，依此类推，直到内容结束。

Answer 1

我同意评论者的意见，通常有更好的方法，这样的想法会变得缓慢而且无处不在（用于布局的JavaScript通常是页面架构中出现问题的信号）。

但是，有一个解决方案。

您需要测量100x100框中适合的单词数量，并以适当的方式对内容进行切片。为此，您可以使用隐身div与width: 100px但height: auto并在其中添加内容，直到其offsetHeight变得大于100。由于您可能使用普通字体而不是等宽字体，因此需要对每个盒子进行测量。在下面的示例中，我们将根据需要对lorem ipsum文本进行切片以适应多个100x100的框。它没有得到很好的优化，你可能需要进一步的工作来满足你的目的。

var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'

var boxParent = document.getElementById('parent');

while (loremIpsum.length > 0) {
    var boxContent = document.createElement('div');
    boxContent.className = 'content __measuring';
    boxParent.appendChild(boxContent);

    var indexOfSpace = loremIpsum.indexOf(' ');
    var lastIndexOfSpace = indexOfSpace;
    while (indexOfSpace != -1 && boxContent.offsetHeight < 100) {
        boxContent.innerHTML = loremIpsum.substring(0, indexOfSpace);
        lastIndexOfSpace = indexOfSpace;
        indexOfSpace = loremIpsum.indexOf(' ', indexOfSpace + 1);
    }
    if (indexOfSpace == -1) {
        boxContent.innerHTML = loremIpsum;
        loremIpsum = '';
    }
    else {
        loremIpsum = loremIpsum.substring(lastIndexOfSpace + 1);
    }

    boxContent.className = 'content';
}

#parent .content {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 8px;
  margin: 8px;
  background: yellow;
  font-family: Arial, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  vertical-align: top;
  }

#parent .content.__measuring {
  height: auto;
  }

<div id="parent">
</div>

在一定高度和宽度的div中可以容纳多少内容

1 个答案: