我正在尝试构建类似于 Google Docs 编辑器的东西，其中用户编辑的文本可以垂直地在页面之间流动，如下所示：
到目前为止，我对如何执行此类操作的最佳想法是不断测量页面容器中内容的大小，如果超出分配给页面的大小，则以编程方式将文本片段移动到第二页直到第一页中的内容再次适合。
由于没有构建类似 Google Docs 的布局引擎（传统的文字处理器），我还没有想出更好的东西，但后来我偶然发现-webkit-column-gap（显然只能在 WebKit 上工作，我现在还可以）。
使用-webkit-column-gap，我可以将文本从列传输到列；如果我将文本放在一个contenteditablediv 中，它几乎接近了我正在寻找的效果 - 当我输入更多内容时，内容会自动从“页面”流向“页面”，除了“页面”都是并排的列，像这样：
这是我为此使用的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8"></meta>
<link rel="stylesheet" href="book.css" type="text/css"/>
</head>
<body>
<div class="body">
<div class="content" contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum tempor suscipit. Donec nec mauris leo, in blandit lacus. Nunc a condimentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sagittis porta leo fermentum faucibus. Ut porta, sem sit amet placerat interdum, odio enim ornare nisi, vitae rhoncus lacus erat quis leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc accumsan iaculis nisi, et lacinia turpis fringilla eu. Aliquam adipiscing posuere dui. Integer vel nulla purus. Praesent at eros leo, at facilisis augue. Aliquam aliquam vulputate lacinia. Cras vel leo urna, sed commodo augue. Nullam fringilla eleifend augue ac tincidunt. Maecenas quis velit tortor, sit amet tempor quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam tortor, ornare nec rutrum at, eleifend sed odio. Nam dignissim erat a velit interdum a egestas enim ullamcorper. Nulla sit amet massa quis metus congue tincidunt id vitae felis. Praesent at odio a ante molestie viverra. Aenean fringilla nisi sed urna sodales feugiat aliquet diam vehicula. Aliquam erat volutpat. Vivamus facilisis ultricies est nec consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ac consectetur mi. Vestibulum volutpat rutrum urna, eu vestibulum sem posuere in. Cras volutpat lacinia lorem, vitae commodo quam congue a. Praesent vestibulum placerat nisi ac bibendum. Aenean nec urna quam, id dapibus neque. Quisque elit tellus, condimentum sed semper quis, vulputate a mi.</p>
<p>Sed ac turpis sed felis condimentum sodales. Nulla facilisi. Vivamus porttitor scelerisque vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas pellentesque rutrum eleifend. Suspendisse potenti. Sed sed lacus nec velit lobortis pellentesque. Suspendisse in neque lacus. Proin vel risus ullamcorper orci condimentum convallis. Duis quis lectus eu nibh bibendum feugiat. Etiam dapibus dapibus nisl ut interdum. Pellentesque sollicitudin sollicitudin dapibus.</p>
<p>Nam interdum lobortis augue eleifend suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pharetra, orci vitae luctus pretium, lectus purus blandit magna, a viverra sapien metus quis libero. Morbi scelerisque sem sed turpis gravida ultricies. Mauris in fringilla risus. Sed non enim vel ipsum aliquet consequat non ut metus. Ut tincidunt ante eget est pretium lobortis tempor erat interdum. Proin faucibus justo odio, sed accumsan erat. Fusce ac risus lacus.</p>
<p>Etiam condimentum, ligula nec lobortis commodo, lectus sem ultrices ante, vel eleifend lacus tortor eu felis. Vivamus euismod imperdiet libero, sed blandit magna faucibus id. Nulla auctor venenatis suscipit. Integer massa nisi, eleifend nec tincidunt id, aliquam nec metus. Nam ac elit vitae mauris condimentum viverra. Proin pharetra facilisis odio ac facilisis. Pellentesque et nisi malesuada justo pellentesque aliquam ut nec purus. Sed iaculis, nibh at ultricies euismod, turpis magna vulputate libero, non pretium tellus erat ut justo. Sed placerat mattis neque, a tempus purus aliquam in. Sed egestas dapibus magna. Quisque iaculis dictum mauris, non iaculis massa lacinia sit amet. Proin congue quam sed augue mollis volutpat. Morbi velit libero, venenatis ut commodo vel, mollis ut erat.</p>
</div>
</div>
</body>
</html>
和CSS：
html {
padding: 0px;
height: 400px;
-webkit-column-gap: 0px;
-webkit-column-width: 200px;
}
p {
text-align: justify;
}
现在这一切都很好，但我真正想要的是“页面”垂直堆叠，就像上面的 Google Docs 示例一样。
关于如何做到这一点的任何想法？