Javascript 用child分割dom元素

我正在制作一个web应用程序，它根据用户的输入动态生成一个文档，用户可以在表单旁边看到他的文档预览（每次用户回答问题时，预览都会更新）。但我现在很难找到一种方法，从丑陋的弹出窗口切换到真正的PDF预览，用户可以在实时文档中看到与输出（PDF）相同的外观

我尝试过很多方法，比如检查哪个子元素溢出，然后将它（它旁边的元素）移动到下一个元素，但是如果子元素太大，那么我会在第一页上有两行，另一页上有一半，等等

我曾考虑过用弹出窗口（屏幕截图）创建一个画布，但该应用程序将对浏览器的资源非常贪婪，并将扼杀该应用程序的性能

最好的方法是什么

在jquery中是否有一种方法可以拆分此项：

<span>
  <span>
    <span>
      Lorem impus
    </span>
  </span>
</span>

不纯洛伦

对此

<span>
  <span>
    <span>
      Lorem
    </span>
  </span>
</span>
<span>
  <span>
    <span>
      impus
    </span>
  </span>
</span>

洛勒姆
杂质

---

但是快速且不影响应用程序性能

我希望它能这么简单：）为什么不能使用pdf预览？可以用javascriptDude生成pdf，你刚刚创造了我的一天：D