javascript - 当内容溢出超过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 复制 Angular 色时出现问题。因此，我想，通过检测溢出的文本，将其剪切，然后将其粘贴到新的 div 元素中是更好的解决方案。但是，我不知道如何使用 JQuery 或 Javascript 来解决这个问题。

有什么想法吗？提前致谢!

Answer 1

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

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

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