HTML and CSS Reference
In-Depth Information
CONTROLLING WHERE THE COLUMNS BREAK
A number of properties defined in multi-col are intended to allow you to set where
columns will break. To illustrate this, let's look at the file our-friends-multi-col.
html. It is the same as the previous version of this example you saw, but I've added
some
<h3>
elements into the mix and an unordered list to experiment with. As is,
the situation isn't great; you'll tend to get unsightly column breaks in places, such
as just after the
<h3>
s.
To re m e d y t h i s p ro b l e m , y To u n e e d t To t e l l t h e b ro ws e r w h e re t To b re a k y To u r
columns! The available break properties and their values are as follows:
break-before
.
Controls breaking before the element(s) being selected. Pos-
sible values are
auto
,
always
,
avoid
,
column
, and
avoid-column
.
break-after
.
Controls breaking after the element(s) being selected. Possible
values are
auto
,
always
,
avoid
,
column
, and
avoid-column
.
break-inside
.
Controls breaking inside the element(s) being selected. Pos-
sible values are
auto
,
avoid
, and
avoid-column
.
NOTE:
There are other break property values besides those listed, but they
only apply to paged media:
avoid-page
,
left
,
page
, and
right
.
To s t To p t h e c To l u m n s f ro m b re a k i n g a f t e r h e a d i n g s , y To u c To u l d u s e t h e fo l l To w -
ing ruleset:
h3 {
break-after: avoid-column;
}
It is also best to always break columns before the
<h3>
s so they appear at the
top of the columns. This can be done like so:
h3 {
break-before: column;
}
