javascript - 我如何使用纯 Javascript(无 JQuery)将文本正文动态拆分为两个偶数列？

Question

我已经尝试过两种似乎不起作用的方法:1) 我测量了单词总数并将其除以 2，但是当单词真的很长时就会出现问题，而且并非所有单词的长度都相同等 2) 我测量了每个字符的像素高度，整个文本的 clientHeight，并将文本的总高度除以一个字符的高度，以查看一列中有多少行以及有多少行在另一个。这种方法非常有效，除非需要考虑图像、段落和其他 HTML 标记。

我需要想出一种将图像和其他 HTML 标记考虑在内的新方法，而且我只能使用 HTML、CSS 和 JavaScript(不能使用 JQuery、JSON、Ajax 等)。如果您有想法/算法，请告诉我!谢谢:)

Answer 1

我在 JSFiddle 上为您创建了一个快速而肮脏的“hack”http://jsfiddle.net/uWUBE/

希望对您有所帮助，您可以将其编辑为更具动态性。这是一些代码。它基本上循环遍历单词的数量，然后将其添加到您分配给列的字符串中，我根本不是 Javascript 策划者所以..可能有更好的方法。

`

//  Get the text
var txt = $("p").text();
//  Split every word
var words = txt.split(" ");
//  Count the amount of words
var amount = words.length
//  Amount of columns
var columnAmount = 2

//  Amount of words in first colum 
var firstColumn = Math.floor(amount / columnAmount);

//  String for first column
var firstColumnTxt = "";
//  String for second column
var secondColumnTxt = "";

//  loop trough the words and add them to the first column
for (var i = 0; i < firstColumn; i++){
    firstColumnTxt =     firstColumnTxt + " " + words[i]; 
}
//  loop trough the words and add them to the second column
for (var i = firstColumn; i < amount; i++){
    secondColumnTxt =   secondColumnTxt + " " + words[i];
}

// Add this to your first column
console.log(firstColumnTxt);
//  Add this to your second column
console.log(secondColumnTxt);

`