HTML and CSS Reference
In-Depth Information
column Always force a column break.
avoid-page Avoid a page break.
avoid-column Avoid a column break.
The break-inside property accepts only the following values: auto , avoid , avoid-page , and avoid-column .
The following style rule instructs the browser to avoid breaks inside or immediately after <h2> headings:
h2 {
break-after: avoid-column;
break-inside: avoid-column;
These properties indicate a desired, rather than a guaranteed outcome.
The Multi-column Layout module provides a simple way to flow content into linked columns in the same way as
a newspaper or magazine. You can specify either the desired width or number of columns, or both. The browser
adjusts the values automatically to achieve what it considers to be the optimal layout. The gap between columns
is adjustable with the column-gap property, and you can add an optional vertical rule between columns. Neither
the gap nor the rule affects the overall width of the multi-column element. If the rule is wider than the gap, it runs
under the content in most browsers. But WebKit-based browsers don't display oversized rules.
Child elements can be made to span all columns, breaking the content into independent sections, each
styled as a new row of columns. To prevent browsers from clipping oversized images, give them a maximum
width of 100% to constrain them within their column box.
The main drawback of multi-column layout is that text flowing from one column to the next often forces the
user to scroll up and down the page, making it difficult to read. However, it's extremely useful when designing for
a known screen size, such as an iPad application. It can also be useful for text-intensive print styles.
The next chapter delves into another new aspect of CSS3—creating color gradients without images.
Search WWH ::

Custom Search