Javascript 当内容溢出超过div的固定高度时，如何创建新div？

CSS

HTML

动态文本

当动态文本溢出超过div的固定高度时，如何创建新div

例如：

<div class="page">dynamic text</div>

此处将显示一些动态文本

当动态文本溢出超过div的固定高度时，上面的内容将如下所示

<div class="page">Some dynamic texts will appear here</div>

一些动态的
文本将
出现在这里

我曾尝试在PHP

wordwrap（$dynamic_text，600，”）中使用wordwrap函数它可以运行，但从Ms.Words复制角色时出现问题。
因此，通过检测溢出的文本，将其剪切，然后将其粘贴到新的div元素中，我想这是更好的解决方案。但是，我不知道如何使用JQuery或Javascript实现这个解决方案

有什么想法吗？提前谢谢
 你可以做到，而且不仅仅是几行代码。一位经验丰富的开发人员花了几天时间。抱歉，无法共享代码

Javascript：将整个内容放入div。您可以将其隐藏或暂时退出DOM。遍历div的子对象。查找其顶部+滚动高度超过div高度的一个。递归地遍历它。最终，您将发现一个不可分割的元素，例如，一个不合适的图像，或者在文本节点中找到一个位置来拆分文本。从div中删除该部分和所有其他元素。将它们添加到新元素中

有很多细节需要解决，所以这并不简单。但这是可行的
 我今天在寻找答案的时候也做了类似的工作，但似乎没有什么直接的答案

虽然我使用的是
Array.reduce（）
，但您应该能够使用
Array.forEach（）
或任何其他您喜欢的迭代代码来实现这一点

<div class="page">Some dynamic</div>
<div class="page">texts will</div>
<div class="page">appear here</div>

这是通过计算如果在实际渲染之前向元素添加另一个单词，元素是否会溢出来实现的。这里有一个棘手的问题，就是在其内部添加另一个
块
元素，该元素具有
可见性：hidden

words.reduce(function(acc, value) 

如果溢出，我们保持原样，创建一个新元素，并将当前值放入迭代中。然后我们将其附加到与前一个元素相同的DOM树上（作为其父级的子级…就像有了一个新的兄弟一样，您如何添加动态内容？只需创建一个helper函数，在动态请求的success函数中评估div的高度，并执行所需的逻辑。无论如何，我们需要更多信息，例如在什么情况下文本会被拆分？150个字符？关于一封信？+1个很好的问题Alam Listyadi！另外，您已经提供了足够的信息。这个问题也适用于非动态文本，通过您的示例可以理解，文本拆分发生在溢出点，同时保留了整个单词。另外，我已经取消了编辑，因为它也理解您不需要尾随空格。我明白了很多jQuery都在解决这个问题。干杯！@Ohgod为什么我要从数据库中添加动态内容。这些内容支持html标记，当内容超过div的固定高度时，文本会被分割。它像Ms.Words一样运行，当内容超过页面高度时，无论我如何操作，都会创建一个新页面任何字符。有可能吗？看看这个
words.reduce(function(acc, value) 

element.innerHTML = '<div style="visibility: hidden; height: 100%; width=100%">' + textToBeAdded + '</div>';

if (element.scrollHeight > element.offsetHeight)