How to divide a large text into multiple chunks, all with the same max-height?

CSS3's column-module allows you to divide your text into a multiple columns. Either by

1) specifying the column-height property (all columns will have the same author-defined height, the column count is dynamic)

or,

2) specifying the column-count property (all columns have the same computer-generated height, the number of columns is defined by the author).

What I would开发者_开发百科 like to have is option 1, but instead of having the columns next to each-other I'd like to have them underneath each other. This way they wouldn't really be columns, but more like rows with a defined height.

This way the text will be divided into pages of all the same height. (Like when you print out a webpage.)

Any ideas on how to achieve this? ( My project only requires webkit-support. )

The column module won't do that. You would be better off declaring a class on a div with the a declared height. If you're looking for dynamic columns, you may need to do some programming via js or php.

By the way, I did play with the following idea which sort of works:

1. Use a multi-column DIV to split the text into different same-height chunks.
2. Copy the multi-column DIV X times, where X = number of generated columns.
3. On each DIV, only show one column. (by using overflow: hidden and a width)
4. Position the columns so they are underneath each-other.

This works, but is VERY slow as you can imagine.

Perhaps there's a way to show the same multi-column DIV multiple times with different view-ports, without copying the whole DOM tree?

JS seems like the way to go. Check out this jQuery function from the Filament Group. Masonry might be of interest too.

// make columns equal height
function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}