如何编程实现多文本列布局？让文本流入多列

Question

编辑：这在今天已经完全过时且无关紧要，因为我们现在拥有智能 CSS 多列解决方案，使得 2011 年的这个问题变得过时。

---

当我发现 css3/Mozillas 多文本列选项时，我很高兴，BUT 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>";

在（现已更新的）小提琴上尝试一下

！

但请注意：这是一个非常简单的实现，看起来不太好。特别是对于短文章，您会遇到列高不同的问题，因为您没有检查字母宽度！

Answer 2

我希望结果能够完美地适应任何宽度的设备，所以很明显我必须使用弹性盒。布局应该是页面，每个页面都适合屏幕以便于阅读。 （必须映射 Page Up、Page Down 和其他一些事件才能平滑地按页滚动。）

页面的内容应尽可能多地包含固定宽度的列。因此，布局是一个或多个垂直页面，每个页面包含一个或多个水平框。这种布局就像一本杂志，每一页都包含一列或多列流动文本。

虽然我已经成功地手动实现了此布局，将文本放入 div，但我也想要一个自动布局，如果可能的话，带有连字符和行对齐，就像在杂志中一样。

自动布局的主要问题是几乎不可能使用 JavaScript（或者更糟糕的是 PHP）来计算一行文本（以及图像和其他元素）的高度和宽度。原因包括：每种字体中的字符大小不同，以及字符中的每个字形不同。我真正需要的是一个 DOM 函数，给定一个 DOM 子树，它返回其宽度和高度而不显示任何内容。然后我可以在显示之前将每段文本正确打包到父级和子级 div 中。

实验表明，这个过程会非常慢，可能是因为在合理化过程中多次重新计算 DOM 子树的复杂性，并且通过二分搜索进行打包并不足以帮助这种减慢。

因此，自动流动布局可能是可能的，但前提是浏览器将其作为 DOM 生成的一部分。只有浏览器才能轻松访问计算所需的所有信息。

在那之前，在遥远的将来的某一天，为了在任何设备宽度上轻松阅读文本，需要手动将文本放入父级和子级 div 中。