假设我的内容是1000字。而且我有多个高度和宽度为100X100的div，并且可以根据需要创建相同高度和宽度的新div。如何确定一个div足够的内容，其余内容将移至下一个div，依此类推，直到内容结束。
我同意关于您的问题的评论者的意见，即通常有更好的方法，并且这样的想法会变慢，并且肯定不会在所有地方起作用（用于布局的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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句