如何为多文本列布局编程？使文本流入多列！

Question

很高兴找到 css3/Mozillas 多文本列选项，但是 source1 & source2 证明 IE9，截至 2011 年 1 月最流行的浏览器，将不支持多列 css3 ！ 太糟糕了！

目前我使用了一个愚蠢的工作流程，即手动将文本分成三个向左浮动的 div。正如你可以想象的那样，这是一件令人头疼的事情，因为我必须一遍又一遍地重排所有内容，直到我做对为止。正面说明：手动控制段落开头和结尾！

<div id="CLMN1"><p>Text1</p></div>
<div id="CLMN2"><p>Text2</p></div>
<div id="CLMN3"><p>Text3</p></div>

问题有哪些解决方案可以将文本巧妙地排列到多列中，同时只有一个不可分割的<p>text1 Text2 Text3</p> 作为输入？也许您已经知道一个解决方案，或者可以建议/草拟您将如何在这里与我分享？欢迎任何形式的灵感，甚至是看似偏离主题的报纸版面图片，因为这个主题的全部目的显然是为了能够更轻松/更美观地阅读页面。

谢谢！

Answer 1

我曾经遇到过同样的问题，不知道css3的多列支持。

我所做的是：

• 数个字母，
• 将字符串一分为三
• 将我生成的尾随单词存根拉入下一列

Javascript 实现：

var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=text.length;
var cols= new Array("","","");
var colc= new Array(0,0,0);
var col=0;

for(var i=0; i<wordc; i++){
    cols[col]+=words[i]+" ";
    if( (colc[col]+=words[i].length)>length/3)col++;
}


document.getElementById('text').innerHTML="<p>"+cols[0]+"</p><p>"+cols[1]+"</p><p>"+cols[2]+"</p>";

试试on a (now updated) fiddle!

但请注意：这是一个非常简单的实现，看起来不太好。尤其是短篇文章，你会遇到列高不一样的问题，因为你不检查字母宽度！