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

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

我同意你问题的评论，通常有更好的方法，这样的想法会很慢，而且肯定不会到处都有（用于布局的JavaScript通常是页面架构问题的信号）

然而，有一个解决办法

您需要测量100x100框中适合的单词数量，并以适当的方式对内容进行切片。为此，您可以使用宽度为100px但高度为自动的不可见的

div

，并将内容添加到该框中，直到其

offsetHeight

大于

100

t而不是单间距的，需要对每个框进行测量。在下面的示例中，我们将切片

lorem ipsum

文本，以根据需要放入100x100个框中。它不是非常优化，您可能需要进一步的工作来满足您的目的

var loremIpsum='Lorem ipsum door sit amet，奉献精英，在劳动和财富方面的临时投入。但在最低限度上，我们必须在公共消费前进行劳动和财富的实践。两人或两人或两人或两人或两人或两人或两人或两人或两人或两人或两人或两人或两人或两人，或两人或两人或两人或两人，或两人或两人或两人或两人，或两人或两人或两人或两人或两人或两人，或两人或两人或两人或两人或两人或两人或两人或两人或两帕里奥特。”
var-boxParent=document.getElementById（'parent'）；
而（loremIpsum.length>0）{
var-boxContent=document.createElement（'div'）；
boxContent.className='content _'测量'；
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=''；
}
否则{
loremIpsum=loremIpsum.substring（lastIndexOfSpace+1）；
}
boxContent.className='content'；
}

#parent.content{
显示：内联块；
宽度：100px；
高度：100px；
填充：8px；
利润率：8px；
背景：黄色；
字体系列：Arial，无衬线；
字体大小：16px；
框大小：边框框；
垂直对齐：顶部；
}
#父项内容。\u{
高度：自动；
}

这是一个困难的问题。可以容纳多少个字符，取决于字体大小和使用的字体艺术。你为什么需要这样一些不灵活和硬编码的东西？同意Tobias的观点。应该有更好的方法来实现结果TOP-解释更多-你为什么需要这样的东西。想要的结果是什么，为什么？（编辑带有视觉效果的问题将帮助我们帮助您，嗯……您可以尝试向

div

添加内容，并检查其

offsetHeight

。这将是页面上文本的实际大小。

div

必须添加到DOM中并可见，though@qxz，是的，这当然是可能的，尽管需求是有问题的le，我使用了我在回答中讨论过的一种技术，尽管这项任务相当简单——在CSS尚无法实现的情况下在缩短字符串的末尾显示省略号。非常感谢Andrew Sklyaresvsky提供的解决方案。我发现它非常有帮助。我认为CSS中的一个修改是删除字体系列和字体大小。因为文本将来自Rich textbox。我认为我没有第一次提到它是我的错误。