如何使用javascript將文本分成相同長度的兩列？

Question

我已使用以下參考鏈接的代碼來閱讀模擬。

https://jsfiddle.net/g9zsa86n/

我已經使用<div id="sim"></div>創建了一個框。 它工作正常，但現在我可以將其更改為相同長度的2列。

Q1：如何將文本分為兩列？

Q2：並且閱讀光標將在左側的列中向下移動，然后在右側的列中向下移動。

例如：

如果在框中輸入了大約100個單詞，它將在第一列中顯示前2行，在第二列中顯示后2行。 讀完這4行后，光標應使用autoscroll-x，autoscroll-y遍歷第一列的下2行，第二列的下2行。

如果有可能改變，有人可以幫助我嗎？

Answer 1

您可以僅使用CSS 3來實現。 多列布局模塊定義了列數。 將其設置為2，它將為A1。 將div分為2和A2。 使光標的行為符合預期。

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

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

跨瀏覽器都很好地支持它。 如果您使用指南針之類的東西來編寫CSS，它實際上是可以維護的。

PS並且正如humble.rumble所評論的那樣 ，為了支持舊版本的瀏覽器，您可以使用填充程序退回到現代化程序。