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

Question

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. )

Answer 1

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.

Answer 2

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?