HTML 报纸栏目答案

【问题标题】：HTML newspaper columnsHTML 报纸栏目
【发布时间】：2010-09-15 11:51:11
【问题描述】：

我正在尝试使用文本块创建报纸样式的列。我希望文本均匀分布在 2 列中，这可以对文本长度的变化做出反应。

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

谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

两个音符：

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

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

【讨论】：

【解决方案2】：

如果您决定这样做，在 Mozilla 和 WebKit（以及 Prince）中已经可以仅使用 CSS：

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

【讨论】：

【解决方案3】：

它在 CSS3 规范中，并且 Moz/Webkit 已经使用供应商前缀实现了它。使用column-count 和column-gap 属性：

#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 claims IE 10 will support it as part of CSS3.

【讨论】：

【解决方案4】：

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

作为起点，请参阅w3schools.com CSS3 Multiple Columns 参考页面。

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

一个跨浏览器的解决方案是Columnizer jQuery Plugin。

【讨论】：

【解决方案5】：

CSS3 将允许您使用他们的multicolumn support 执行此操作，但目前，您可能无法依赖很多浏览器来支持它，因此您可能需要依赖其他方法。

【讨论】：

【解决方案6】：

我同意 PhiLho 的观点。如果您仍然想尝试它，如果列具有固定宽度，则将您的内容分成两列的 js 代码非常简单。棘手的一点是决定在哪里拆分内容。您可能不想在单词等中间分裂。

您可以尝试以下方案：在您的页面中添加两列。将您的文本放入第一列（这允许非 js 浏览器仍然显示您的内容）。使用 js 获取文本（例如，来自 onload 事件）。查找“。”的下一个索引。（或者如果你有段落“”）从中间开始。使用该索引拆分文本并将第一部分放回第一列，依此类推...

【讨论】：

【解决方案7】：

3 列格式的IHT has a nice implementation。然而，它似乎是在服务器端计算出来的，我猜是通过计算单词来计算的。

【讨论】：

【解决方案8】：

这是一个简单的（不是 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>';
}

将您的文本放在某个常规元素中，并在页面加载时调用 Newspaperize(yourelement)。

注意：这个函数只是将文本分成两半。要真正正常工作，您需要找到最接近中点的空格或连字符并在那里拆分文本。

【讨论】：

【解决方案9】：

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

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

所以 - 即使你可以通过一些 JS 黑客来做到这一点 - 可能会更好地提出不需要它的替代设计。

【讨论】：

【解决方案10】：

所以我一直在寻找这个问题的答案，遗憾的是，起初我并没有真正找到答案，现在 3 小时后我找到了。

我找到了一个使用 css3 属性的 JavaScript 库（如果我理解正确，只是试图让它工作，它确实做到了，稍后会在 js 中读取）

lib 在这里找到：http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column

唯一的缺点是你想要多列的文本必须在两个标签之间（我更喜欢使用<p> 标签，因为它也支持多个<p> 标签。）

在 ff 3.6，即 8、opera 10.51 和 chrome 4.1 中对其进行了测试。我没有能力测试旧浏览器，所以我建议有人尽快这样做；P

干杯！

【讨论】：

【解决方案11】：

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

【讨论】：