javascript - 多个 div/canvas 之间的流动文本

Question

有点曲线球......我有一个文本区域，人们可以在其中输入长度不确定的文章。

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

CSS 列是行不通的，因为浏览器支持不佳且无法旋转每一列(CSS 列是显示尽可能多的单个元素)。

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

我所有的尝试都失败了。我试图检测字符串何时命中 div 溢出，然后拆分字符串，将其粘贴到另一个 div 中，检测溢出等等。它有点工作，但导致了一些奇怪的换行符。

我试过将文本发送到服务器，然后将其转换为 PDF 发送回客户端 - 但这是非常有问题的，而且速度很慢。

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

我用谷歌搜索了又搜索 - 似乎没有人有满意的解决方案？

谁能给我一些指点？

谢谢，罗布

Answer 1

我已经提出了一个可能的解决方案草案，我需要完成它，但我现在没有时间。看看并根据需要继续。

var essay = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin neque nec imperdiet condimentum. Quisque nec pretium magna. Praesent suscipit placerat nibh, quis elementum tortor interdum id. In in aliquet turpis. Donec in accumsan nisl. Vestibulum et metus placerat, congue sapien sed, volutpat justo. Phasellus sit amet turpis vel est laoreet bibendum sed eu mauris. Mauris nec lorem euismod, luctus urna vel, imperdiet ex. Nam ex quam, ullamcorper sit amet pretium vel, ornare et purus. Integer hendrerit ullamcorper tortor sed venenatis. Ut ornare fermentum eleifend. Proin non porttitor diam. Etiam laoreet tellus at sapien laoreet, nec lacinia neque scelerisque.";
var elm = document.getElementsByClassName("div")[0];

for (var i = 0; i < essay.length; i++) {
  var character = essay.charAt(0);
  essay = essay.substring(1);
  $("div").html($("div").html() + character);
  if (checkOverflow(elm)) { alert("overflow"); break; /* return the last word from div to essay and move to next div */ }
}

function checkOverflow(el) {
  var curOverflow = el.style.overflow;
  if (!curOverflow || curOverflow === "visible") el.style.overflow = "hidden";
  var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
  el.style.overflow = curOverflow;
  return isOverflowing;
}

.div {
  height: 4em;
  width: 10em;
  padding: 1em;
  border: thin solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>