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

Question

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

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

由于浏览器支持不佳以及无法旋转每一列（CSS列是显示多个的单个元素），CSS列是不行的。

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

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

我尝试将文本发送到服务器，然后将其转换为PDF，然后发送回客户端 - 但这很成问题且速度很慢。

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

我用google搜索并用Google搜索 - 似乎没有人有一个满意的解决方案？

有人能给我一些指示吗？

谢谢， 罗布

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>

Answer 2

好的，所以我想出了这个：

https://codepen.io/anon/pen/BZxoZG

使用vue.js和lodash

基本上，循环阅读文章，找到所有换行符'\ n'（段落）并拆分它们以创建一个段落数组。

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

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

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

它似乎在起作用......我粘贴了许多故事，但它们都有效......

此处粘贴代码应该会降低代码。

var app = new Vue({
    el: '#foo',
    data: {
        essay: ''
    },
    computed: {

        pages: function() {

            // Chunkstring taken from 
            // https://stackoverflow.com/questions/6632530/chunk-split-a-string-in-javascript-without-breaking-words

            function chunkString(s, len) {
                var curr = len,
                    prev = 0;
                output = [];
                while (s[curr]) {
                    if (s[curr++] == ' ') {
                        output.push(s.substring(prev, curr));
                        prev = curr;
                        curr += len;
                    } else {
                        var currReverse = curr;
                        do {
                            if (s.substring(currReverse - 1, currReverse) == ' ') {
                                output.push(s.substring(prev, currReverse));
                                prev = currReverse;
                                curr = currReverse + len;
                                break;
                            }
                            currReverse--;
                        } while (currReverse > prev)
                    }
                }
                output.push(s.substr(prev));
                return output;
            }



            var lines = [];
            var message = this.essay; // grab our essay text
            var sp = message.split('\n'); // split on new lines

            for (var i = 0; i < sp.length; i++) {
                lines.push(chunkString(sp[i], 50)); // split each 'line' into 50 char strings
            }

            for (var y = 0; y < lines.length; y++) {
                if (lines[y].length == 0) {
                    lines[y].push('<br>'); // new line, add line break
                }
            }


            var pagesArr = _.flatten(lines);



            pagesArr = pagesArr.map(function(line) {
                if (line == '<br>') {
                    return line; // we already have a BR so don't add one
                }
                return line + '<br>'; // to preserve line breaks
            });
            // lean on lodash... our essay box accomodates 14 lines.
            pagesArr = _.chunk(pagesArr, 14);

            for (var a = 0, b = pagesArr.length; a < b; a++) {
                pagesArr[a] = pagesArr[a].join(' '); //join for display purposes
                pagesArr[a] = pagesArr[a].replace(/^<br>/, ''); // replace br if first char in page
            }


            return pagesArr;

        }
    }
});


app.essay = `Dear Merrys:--As a subject appropriate to the season, I want to tell you about a New Year's breakfast which I had when I was a little girl. What do you think it was? A slice of dry bread and an apple. This is how it happened, and it is a true story, every word.

As we came down to breakfast that morning, with very shiny faces and spandy clean aprons, we found father alone in the dining-room.

"Happy New Year, papa! Where is mother?" we cried.

"A little boy came begging and said they were starving at home, so your mother went to see and--ah, here she is."

As papa spoke, in came mamma, looking very cold, rather sad, and very much excited.

"Children, don't begin till you hear what I have to say," she cried; and we sat staring at her, with the breakfast untouched before us.

"Not far away from here, lies a poor woman with a little new-born baby. Six children are huddled into one bed to keep from freezing, for they have no fire. There is nothing to eat over there; and the oldest boy came here to tell me they were starving this bitter cold day. My little girls, will you give them your breakfast, as a New Year's gift?"

We sat silent a minute, and looked at the nice, hot porridge, creamy milk, and good bread and butter; for we were brought up like English children, and never drank tea or coffee, or ate anything but porridge for our breakfast.

"I wish we'd eaten it up," thought I, for I was rather a selfish child, and very hungry.

"I'm so glad you come before we began," said Nan, cheerfully.

"May I go and help carry it to the poor, little children?" asked Beth, who had the tenderest heart that ever beat under a pinafore.

"I can carry the lassy pot," said little May, proudly giving the thing she loved best.

"And I shall take all the porridge," I burst in, heartily ashamed of my first feeling.

"You shall put on your things and help me, and when we come back, we'll get something to eat," said mother, beginning to pile the bread and butter into a big basket.

We were soon ready, and the procession set out. First, papa, with a basket of wood on one arm and coal on the other; mamma next, with a bundle of warm things and the teapot; Nan and I carried a pail of hot porridge between us, and each a pitcher of milk; Beth brought some cold meat, May the "lassy pot," and her old hood and boots; and Betsey, the girl, brought up the rear with a bag of potatoes and some meal.

Fortunately it was early, and we went along back streets, so few people saw us, and no one laughed at the funny party.

What a poor, bare, miserable place it was, to be sure,--broken windows, no fire, ragged clothes, wailing baby, sick mother, and a pile of pale, hungry children cuddled under one quilt, trying to keep warm. How the big eyes stared and the blue lips smiled as we came in!

"Ah, mein Gott! it is the good angels that come to us!" cried the poor woman, with tears of joy.

"Funny angels, in woollen hoods and red mittens," said I; and they all laughed.

Then we fell to work, and in fifteen minutes, it really did seem as if fairies had been at work there. Papa made a splendid fire in the old fireplace and stopped up the broken window with his own hat and coat. Mamma set the shivering children round the fire, and wrapped the poor woman in warm things. Betsey and the rest of us spread the table, and fed the starving little ones.

"Das ist gute!" "Oh, nice!" "Der angel--Kinder!" cried the poor things as they ate and smiled and basked in the warm blaze. We had never been called "angel-children" before, and we thought it very charming, especially I who had often been told I was "a regular Sancho." What fun it was! Papa, with a towel for an apron, fed the smallest child; mamma dressed the poor little new-born baby as tenderly as if it had been her own. Betsey gave the mother gruel and tea, and comforted her with assurance of better days for all. Nan, Lu, Beth, and May flew about among the seven children, talking and laughing and trying to understand their funny, broken English. It was a very happy breakfast, though we didn't get any of it; and when we came away, leaving them all so comfortable, and promising to bring clothes and food by and by, I think there were not in all the hungry little girls who gave away their breakfast, and contented themselves with a bit of bread and an apple of New Year's day.

https://americanliterature.com/author/louisa-may-alcott/short-story/cousin-tribulations-story
`

CSS

textarea {
  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;
}

HTML

<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>