当内容溢出div的固定高度时,如何创建新的div？

Question

CSS

.page{ 
      width: 275px;
      hight: 380px;
      overflow: auto;
     }

HTML

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

当动态文本溢出div的固定高度时,如何创建一个新的div？

例:

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

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

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

我已经尝试在PHP中使用wordwrap函数wordwrap($dynamic_text, 600, '</div><div class="page">');它可以运行,但是当从Ms.Words复制角色时它有问题.所以,通过检测溢出的文本,剪切它,然后将其粘贴到新的div元素是更好的解决,我猜.但是,我不知道如何使用JQuery或Javascript来做这个解决方案.

有任何想法吗？提前致谢!

Answer 1

您可以做到，而且不仅仅是几行代码。一位非常有经验的开发人员花了几天的时间。抱歉，无法分享代码。

Javascript：将整个内容放入 div 中。您可以将其隐藏或保留在 DOM 之外一段时间。遍历 div 的子级。找到top+scrollHeight超过div高度的那个。递归地遍历它。最终，您将找到一个不适合的不可分割的元素（例如图像），或者文本节点中的一个位置来分割文本。从 div 中删除该部分和所有其他元素。将它们添加到新的中。

有很多细节需要解决，所以并不简单。但可行。