HTML and CSS Reference
In-Depth Information
Setting Manual Column Breaks
By default, browsers automatically break the content within a columnar layout in a way
that keeps the columns roughly the same height. To create manual column breaks, CSS3
introduced the following style properties:
break-before: column;
break-after: column;
A column break created with one of these properties is placed directly before or after
the element specified in the style rule selector, respectively. For example, the follow-
ing style rule inserts a column break directly after any br element that appears within a
paragraph:
p br {
break-after: column;
}
CSS3 also provides styles to suppress column breaks with the following properties:
break-before: avoid-column;
break-after: avoid-column;
break-inside: avoid-column;
Thus, the following style rule prevents a column break from occurring within a
blockquote element:
blockquote {
break-inside: avoid-column;
}
No browser currently supports these manual column breaks. WebKit (used in Safari
and Chrome) provides the column break properties
-webkit-column-break-before: type ;
-webkit-column-break-after: type ;
where type is always (to force a column break), avoid (to suppress a column break ),
inherit (to inherit the style of the container element), or auto (the default, which
inserts a column break automatically when needed). Unfortunately, although they are
part of the WebKit specifications, these styles to introduce manual column breaks are
not currently implemented in any browser.
Kyle is pleased with the work you've done on the programming schedule page. He'll
discuss your fi nal design with other people at the station and get back to you with future
projects.
Search WWH ::




Custom Search