Question

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

这可能只使用HTML / CSS，如果不能使用javascript吗？

由于

Answer 1

两个注释：

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

所以我认为JS是你最好的选择，但当然对于那些没有使用JS的用户来说也不行。

Answer 2

如果您决定这样做，Mozilla和WebKit（以及Prince）只能使用CSS：

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

Answer 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。

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

这是一个简单的（不是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）。

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

Answer 8

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

Answer 9

正如其他人所说的那样 - 对于vanilla CSS / XHTML而言，这是不可能的（至少 - 直到我们得到广泛的CSS3： - ）

但是，戴着我的用户体验帽子，我会对你想要在网页上使用这个用例感兴趣（假设它是你正在定位的普通网页）。与打印分割不同，两列上的文本块会使其难以阅读。如果它比屏幕长，那么用户必须进行大量的上下滚动来扫描/读取所有内容。

所以 - 即使你可以用一些JS黑客攻击 - 可能更好的是提出一个不需要它的替代设计。

Answer 10

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

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

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

唯一不利的是，您希望多文本HAS的文本位于两个标记之间（我更喜欢使用<p>标记，因为它还支持多个<p>标记。）

在ff 3.6中测试它，即8，opera 10.51和chrome 4.1。我不能测试旧版浏览器，所以我建议很快有人这样做; P

喝彩！

Answer 11

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

HTML报纸专栏

11 个答案: