如何使用javascript将文本拆分为两列相同的长度？

Question

我使用了以下参考链接的代码来进行模拟。

https://jsfiddle.net/g9zsa86n/

我使用<div id="sim"></div>创建了一个方框。它工作得很好，但现在我已将它改为2列相同的长度。

Q1：如何将文本拆分为2列？

Q2：并且读取光标将沿着左侧列向下移动， 然后在右边的列上。

例如：

如果在框中输入了大约100个单词，它将在第一列中显示前2行，在第2列中显示下2行。读完这4行后，光标应该沿着第一列的2行，接着是第2列的第2行，使用autoscroll-x，autoscroll-y。

如果有可能改变，有人可以帮助我吗？

Answer 1

你可以只使用CSS 3. Multi column layout module定义列数。将其设置为2，它将为A1。将div拆分为2和A2。让光标按预期运行。

https://jsfiddle.net/g9zsa86n/3/

#sim{
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

这是well supported across browsers。如果您使用类似compass的内容来编写css，那么它实际上是可维护的。

PS和as humble.rumble commented，为了支持您的浏览器，您可以使用shim回退到现代化者。