Javascript HTML报纸专栏

我正在尝试使用一块文本创建报纸样式的专栏。我想文本均匀地分布在两列上，这可以对文本长度的变化作出反应

这是否可能仅使用HTML/CSS，如果不可能，是否可以使用javascript

---

谢谢，CSS3将允许您使用他们的浏览器来实现这一点，但目前，您可能无法依赖很多浏览器来支持它，因此您可能需要依赖另一种方法。

• 适用于打印介质的内容不适用于显示介质。必须向上滚动才能继续阅读对我来说似乎不是个好主意。毕竟，网页的长度不受限制
• 使用CSS2无法做到这一点。我认为CSS3对此有支持（不确定），我怀疑大多数浏览器都支持它

---

所以我认为JS是你最好的选择，但它当然不适用于禁用JS的用户。

我同意PhiLho的观点。如果您仍然想尝试，那么js代码将您的内容划分为两列是非常简单的，如果这些列具有固定的宽度。棘手的一点是决定在哪里分割内容。你可能不想在单词的中间分裂。 您可以尝试以下场景：在页面中添加两列。将文本放在第一列（这允许非js浏览器仍然显示您的内容）。使用js获取文本（例如，从onload事件）。从中间开始查找下一个“.”（或如果有段落“

”）索引。使用该索引拆分文本，并将第一部分放回第一列，依此类推……

这里有一个简单（不支持CSS）的javascript函数，可以实现这一点：

function Newspaperize(elem)
{
    var halflength = elem.innerText.length / 2; 
    var col1 = elem.innerText.substring(0, halflength);
    var col2 = elem.innerText.substring(halflength);

    elem.innerHTML = '<TABLE WIDTH=100%><TR>' + 
        '<TD WIDTH=50% VALIGN=TOP>' + col1 + '</TD>' +
        '<TD VALIGN=TOP>' + col2 + '</TD>' +
        '</TR></TABLE>';
}

function新闻纸化（elem）
{
var halflength=elem.innerText.length/2；
var col1=elem.innerText.substring（0，半长）；
var col2=elem.innerText.substring（半长）；
elem.innerHTML=''+
''+col1+''+
“+col2+”+
'';
}

将文本放在某个常规元素中，并在页面加载时调用Newspaperize（yourelement）

---

注意：此函数仅将文本一分为二。要真正正常工作，您需要找到一个距离中点最近的空格或连字符，并在那里拆分文本。

采用3列格式。然而，我猜这似乎是通过计算单词来计算的服务器端。

正如其他人所说的那样——普通的CSS/XHTML不可能做到这一点（至少——直到我们得到广泛的CSS3:-）

不过，戴上我的用户体验帽，我会对您希望在网页上使用此功能的用例感兴趣（假设您的目标是一个普通网页）。与打印不同，将文本块拆分为两列会使其更难阅读。如果它比屏幕长，那么用户必须做大量的上下滚动来扫描/读取所有内容

---

因此，即使你可以通过一些JS黑客攻击来实现，最好还是想出一个不需要它的替代设计。

我成功地做到了类似的事情，但是，不是在CSS中，我使用PHP来计算单词和分割文本。不幸的是，计算单词是一种非常糟糕的方法，因为有些单词比其他单词长，而且列不匹配。我的设计灵感来自IHT网站。在PHP中实现并不困难。

如果您决定这样做，那么在Mozilla和WebKit（和）中只使用CSS即可实现：

selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

---

所以我一直在寻找这个问题的答案，很遗憾，一开始我并没有找到答案，三个小时后我找到了

我发现了一个使用css3属性的JavaScript库（如果我理解正确，只是尝试让它工作，它做到了，稍后将在js中阅读）

可在此处找到lib：

唯一的缺点是您想要多栏的文本必须位于两个标记之间（我更喜欢使用

标记，因为它还支持多个

标记。）

在ff 3.6、ie 8、opera 10.51和chrome 4.1中对其进行了测试。 我不能测试老版本的浏览器，所以我建议尽快有人这样做；P

---

干杯

它在CSS3规范中，Moz/Webkit已经使用供应商前缀实现了它。使用

列计数

和

列间距

属性：

#container {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

---

当然，请注意，任何人使用的IE版本都不支持这些功能。CanIUse.com。

CSS3提供了一种将任何HTML节点的内容转换为任意数量列的方法。有一些属性用于控制列数及其宽度、相对高度（“填充”或内容在现有列之间的划分方式）、列之间的间距、“规则”（分隔线或边框）等

作为起点，请参见参考页

然而，像往常一样，IE在广泛使用的浏览器中不支持column-CSS3属性

跨浏览器解决方案之一是