Javascript 在多个div/canvas之间流动文本

被赋予了一点曲线球。。。我有一个文本区，人们可以在其中键入长度不确定的文章

我需要展示他们在一组div中键入的内容（每个div具有相同的固定宽度和高度）。文本应该从一个div流向另一个div。我应该能够旋转div

CSS列是不可使用的，因为浏览器支持较差，并且无法旋转每一列（CSS列是一个显示尽可能多的单个元素）

文本需要在每个div之间流动，就像文字处理器中的页面一样

我所有的尝试都失败了。我试图检测字符串何时碰到divs溢出，然后拆分字符串，将其粘贴到另一个div中，检测溢出，等等。这有点奏效，但导致了一些奇怪的断线

我曾尝试将文本发送到服务器，在那里我将其转换为PDF格式并发送回客户端，但这是非常有问题的，而且速度很慢

我曾尝试使用canvas在多个canvas元素之间流动文本，但无法使其正常工作

我搜索了又搜索——似乎没有人能找到令人满意的解决方案

有人能给我一些建议吗

谢谢，

---

Rob

我已经起草了一份可能的解决方案，我需要完成，但我现在没有时间。如果需要，请查看并继续

var散文=“Lorem ipsum dolor sit amet，献祭精英。库拉比图尔·索利西图因·内克·内克·内克饮食调味品。这是一个巨大的挑战。这是一种特殊的方法，它是一种元素，可以在一块土上使用。在accumsan nisl的Donec。前庭和耳道，智利塞德，帕特胡斯托。Phasellus坐在阿梅特·图尔皮斯（amet turpis）和拉奥里特·比本杜姆（laoreet bibendum）之间，与欧盟的莫里斯（mauris）相邻。毛里斯·内科勒姆·尤伊斯莫德、卢克图斯·乌尔纳·韦勒、帝国主义者纳姆·韦姆、乌拉姆·科珀、奥纳雷·普鲁斯。整数亨德雷特·乌兰科珀侵权威尼斯人。这是发酵欧纳香。非端口直径的Proin。在sapien laoreet，nec lacinia neque scelerisque，Etiam laoreet tellus；
var elm=document.getElementsByClassName（“div”）[0]；
对于（变量i=0；i

.div{
高度：4em；
宽度：10em；
填充：1em；
边框：薄而实的黑色；
}

---

好的，我想到了这个：

使用vue.js和lodash

基本上，在文章中循环，找到所有的换行符“\n”（段落），并将其拆分以创建段落数组

然后，我将每个段落拆分为空格，以创建一个单词数组

然后，通过单词循环，我建立了一个行数组，每行长度为50个字符（填充div宽度所需的数字）

然后我将数组展平，并将其分块，从而得到一个数组，其中每个项目包含14行（14行是页面的高度）

它似乎起作用了…我贴了很多故事，它们都起作用了

在这里粘贴代码应该会导致codepen下降

var-app=新的Vue({
el:“#foo”，
数据：{
文章：''
},
计算：{
页面：函数（）{
//从
// https://stackoverflow.com/questions/6632530/chunk-split-a-string-in-javascript-without-breaking-words
函数块字符串（s，len）{
var curr=len，
prev=0；
输出=[]；
而（s[当前]）{
如果（s[curr++]=''）{
push（s.substring（prev，curr））；
上一次=当前；
curr+=len；
}否则{
var currReverse=当前；
做{
如果（s.子字符串（currReverse-1，currReverse）=''）{
push（s.substring（prev，currReverse））；
prev=货币反向；
电流=电流反向+长度；
打破
}
货币反向--；
}而（当前反向>上一次）
}
}
输出推送（s.substr（prev））；
返回输出；
}
var行=[]；
var message=this.those；//抓取我们的文章文本
var sp=message.split（'\n'）；//在新行上拆分
对于（变量i=0；i”）；//新行，添加换行符
}
}
var pagesArr=u.flatte（行）；
pagesar=pagesar.map（函数（行）{
如果（行=='
'）{
返回行；//我们已经有一个BR，所以不要添加
}
返回行+“
”；//保留换行符
});
//倚靠洛达斯……我们的文章箱可容纳14行。
pagesArr=u.chunk（pagesArr，14）；
for（变量a=0，b=pagesArr.length；atextarea {
  width: 400px;
  height: 400px;
}

#pages {
  width: 400px;
}

.page {
      color: #000;
    background: #fff;
    border: 1px solid #000;
    margin: 10px 0;
    width: 565px;
    height: 400px;
    padding: 20px;
    font-size: 23px;
    font-family: 'Roboto', sans-serif;
  float: left;
}

<div id="foo">
     <textarea v-model="essay" placeholder="Type in your message">
     </textarea>

  <hr style="clear: both">
      <div v-for="(page,i) in pages" >
            <div class="page" v-html="page">
            </div>
        </div>
</div>