Newspaper style multiple-column text in html

I would like to display a text with several columns. The same way that it is displayed on a newspaper:

我想显示一个包含多列的文本。与报纸上显示的方式相同:

I know how to do that with tables of div but, in that case, I have to specify where the text is cut between the columns.

我知道如何使用div表格,但在这种情况下,我必须指定列之间文本的切割位置。

I saw a suitable solution by doing: <div style="column-count:2"> text </bla>

我做了一个合适的解决方案:

text

It works fine with opera but not with the latest firefox and chrome...

它适用于Opera,但不适用于最新的firefox和chrome ......

3 个解决方案

#1

column-count is CSS3, so be warned it will not work in some older browsers.

column-count是CSS3,因此请注意它在某些旧版浏览器中不起作用。

To answer your question, you may need to be more specific with your css:

要回答您的问题,您可能需要更具体地了解您的CSS:

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

#2

You could also use float:left and float:right to make your columns for old browser support.

您还可以使用float:left和float:right来为旧浏览器支持创建列。

Although the text is stuck in each column and wont expand into the next one.

虽然文本卡在每一列中,但不会扩展到下一列。

#3

it would be great if column-count worked on all major browser, but it doesn't. I would suggest you to try splitting the text on to parts using a programming language (like PHP) and insert them to each div. IN simple for it would look like this

如果列计数适用于所有主流浏览器,那将会很棒,但事实并非如此。我建议你尝试使用编程语言(如PHP)将文本拆分为部分,并将它们插入每个div。简单来说它看起来像这样

<?php
$textLenght = strlen($text);
$part1 = substr($text, 0, $textLenght/2);
$part2 = substr($text, $textLenght/2);
?>

<div class="col1"><?php echo $part1 ?></div>
<div class="col2"><?php echo $part2 ?></div>

of course you should use more advenced algorithms to split the text.

当然你应该使用更多的advenced算法来分割文本。