javascript - 关于独立于浏览器的多列文本段落花的问题。 (适用于 IE8 IE9)

Question

前一段时间，有一个关于 IE9 或任何其他 IE 不支持 CSS3 多列的问题。这产生了以下快速简单且非常实用的答案。我想弥补并改进它，因为它有底线不合理的缺陷。你能看到使底部文本行也对齐的缺失吗？实际上，最酷的事情是在任何给定行上少于半个句子后跟一个点，而不是证明该行是合理的。以便下一段更清晰可见。你对那个怎么想的？或者您有更好的想法来改进这个独立于浏览器的多列脚本？

Live Test Result url

var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=words.join("").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 1

我看到的大多数实现都是使用 div + p，检查 treesaver.js:

http://treesaverjs.com/

如果你查看 css3 多列的规范，你会知道有更多的列布局属性。