column-count | Loop and Break

The column-count CSS property describes the number of columns of the element.

Values

auto
Is a keyword indicating that the number of columns should be determined by other CSS properties, like column-width.
<number>
Is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
	-moz-column-count: 4; /* Firefox */
	-webkit-column-count: 4; /* Safari and Chrome */
	/*column-count: 4;*/
	text-align: justify;
}
</style>
</head>
<body>

	<p>
		Note: Internet Explorer do not support the columns property.
	</p>

	<div class="newspaper">On the Insert tab, the galleries include
		items that are designed to coordinate with the overall look of your
		document. You can use these galleries to insert tables, headers,
		footers, lists, cover pages, and other document building blocks. 
		
		When you create pictures, charts, or diagrams, they also coordinate with
		your current document look.You can easily change the formatting of
		selected text in the document text by choosing a look for the selected
		text from the Quick Styles gallery on the Home tab. You can also
		format text directly by using the other controls on the Home tab. Most
		controls offer a choice of using the look from the current theme or
		using a format that you specify directly. 
		
		To change the overall look of your document, choose new Theme elements 
		on the Page Layout tab. To change the looks available in the Quick Style 
		gallery, use the Change Current Quick Style Set command. Both the Themes 
		gallery and the Quick Styles gallery provide reset commands so that you 
		can always restore the look of your document to the original contained 
		in your current template.</div>

</body>
</html>

Categories

Values