Stylable element fragmentation

This demo only works in Firefox. There is a bug in Chrome and Safari with correctly fragmenting the content.

Title

This is an example of some long form flowing content. In real examples, this could be things such as:

Free flowing content

The content can be arbitrarily rich. It can make use of the break-* properties to control where breaks should occur.

The contents will dynamically fill the available space, and fragment where it would overflow the space. The result is that the content can be read in a paginated fashion much like a book.

Summary

You can have long free flowing content with automatic pagination.

Combined with scroll markers, anchors can be created to those pages allowing for quick navigation, providing a sense of overall progress, providing a page count, etc.

Resize the container. The text automatically flows into columns. The result is automatic pagination into the content which fits in each page.