Column breaks

Back to the index.

This page tests the column-break-* properties. Unfortunately this is an area of severe incompatibilities and immense amounts of keywords.

Because there are many keywords, most of which only apply to printed pages, and because the WebKit system differs subtly from the standard one, I’ve chosen to focus on two real-world use cases: forcing column breaks before or after an element, and avoiding column breaks inside an element. I think (or hope) these two cover about 90% of all use cases.

This is the test element:

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

Forcing breaks

In the first test we’ll try to force a break before or after the second paragraph. This is the combined syntax for the break before:

element {
	-webkit-column-break-before: always;
	break-before: column;
}

Use after instead of before to force a break just after the element.

Standard

The column value is meant specifically for forcing breaks in a column environment.

break-before: column

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

break-after: column

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

WebKit

The WebKit-based browsers use their own syntax.

-webkit-column-break-before: always

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

-webkit-column-break-after: always

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

Avoiding breaks

In this test we’ll try to avoid a break in the first paragraph.

element {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

Standard

break-inside: avoid;

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.

WebKit

-webkit-column-break-inside: avoid;

It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.

Heading

This is the second paragraph. We’ll try to break columns just before or after it.

Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.