php - 如何为多文本列布局编程？以便文本流入多个列!

Question

很高兴找到 css3/Mozillas 多文本列选项，但是 source1 & source2证明截至 2011 年 1 月最流行的浏览器 IE9 将不支持多列 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的多列支持。

我所做的是:

• 数字母，
• 将字符串一分为三
• 将我生成的尾部词 stub 拉入下一列

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!

但请注意:这是一个非常简单的实现，看起来并不那么好。特别是对于短文章，你会因为没有检查字母宽度而出现列高不同的问题!