当溢出时，创建一个新的div并将溢出的文本转移到新的div中。

Question

背景：

我正在开发一个项目，它应该能够作为一个专业的文本编辑器。它需要页面来显示输出内容，所以与大多数在线文本编辑器不同，它不能简单地使用一个可扩展的文本框或类似机械装置，而是需要一种方法在当前容器div溢出时创建一个“新页面”（即新容器div）。

我找到了一个相关的stackoverflow问题，从我的搜索结果来看，大多数解决方案对于动态更改文本并不是最好的选择，而是更适合在页面渲染时使用。在最理想的情况下，它应该像在Word文档中创建新页面一样运行（当超出时自动创建），并使用javascript/jquery。

我知道实现这个功能可能比表面上看起来要复杂得多，但我希望有人能提供一篇文章或一段代码，让我能够找到正确的方向。

问题：

我认为我可以实际“创建新页面”（下一个容器div），但我不确定如何处理文本的溢出。例如，如果有人在第一页上删除了一些文本，那么如果第二页上的文本仅仅悬在那里，就会非常不方便。我希望文本/页面至少能够以与编辑Word文档类似的方式进行响应。

我不想每次添加或删除字符时都检查文本，但这是实现这样的功能的唯一方法吗？如果是，那么我最有效的处理方式是什么，以避免拖慢浏览器的速度。

这是我正在开发的项目，以提供更多背景信息：http://www.naturalcrit.com/homebrew/

- BornToDoStuff

---

我认为您需要积极检查用户输入以便重新排列文本。为什么不使用像Columnizer插件这样的东西作为起点：http://welcome.totheinter.net/columnizer-jquery-plugin/ - Patareco

我不知道你如何避免查看按键输入。除非你能捕捉到伪样式选择器像 :overflow，但这并不存在。需要一个你在做什么的例子才能确定。你可以在一个 div 中嵌套一个 div，检查内部 div 的高度或宽度是否达到了外部 div 的阈值，然后移动 "overflow"。你仍然需要将事件与按键绑定，因为每次更改其内容时都要测量内部 div 的 w 和 h。也许你可以绑定 .change()。 - Twisty

看看https://dev59.com/6nI95IYBdhLWcg3w_zSs 这个页面，可以学习到一些关于使用jQuery检测溢出的技巧。 - Twisty

@BornToDoStuff 我认为对于这个应用程序，我会坚持使用一个 div 并仅显示其中的一部分，类似于视口，在添加或更改更多内容时，会创建更多列以使文本换行。然后我们在视口中滚动 div。 - Twisty

@BornToDoStuff 是的！让列继续增长就可以了。我在页面上没有看到太多列样式，但我也没有仔细查看。 - Twisty

Answer 1

我认为在功能和简单性方面最好的答案是使用CSS3 column，并允许其横向扩展。然后添加样式到列或其他元素，使它们看起来像页面。添加一个x轴滚动条以浏览伪页面（这只是具有固定高度的多列），就几乎完成了。

这意味着页面将从左到右而不是从上到下，但这并不是一个坏的解决方案。感谢@Twisty提供的简单解决方案，使用我已经使用并且容易获得的东西。它甚至不涉及代码，只需一些CSS！

- BornToDoStuff