javascript - 一定高度和宽度的 div 可以容纳多少内容

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>