The column-count property
The column-count property specifies
a recommended number of columns in
multi-column text. Their actual number may
differ from the specified one, depending on
the width of the column and the size of the
gap between them.
Syntax
selector {
column-count: number | auto;
}
Values
| Value | Description |
|---|---|
| number | Sets a specified number of columns. More precisely, it recommends the browser to use this number of columns, since their actual number may differ from the specified one, depending on the width of the column and the size of the gap between them. |
auto |
The browser itself selects the optimal number of columns. |
Default value: auto.
Example
In this example, the text will be divided
into 3 columns (of course, in browsers
that support multi-column, in others there
will be just plain text in one column):
<div id="elem">
some long text
</div>
#elem {
column-count: 3;
text-align: justify;
}
:
Example . The auto value
In this example, the column width is
column-width
of 150px, and their number is
column-count is set to auto
- the browser itself will select the
required number of columns and the
space between them:
<div id="elem">
some long text
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
See also
-
the
column-widthproperty
that specifies a column width -
the
column-gapproperty
that specifies a gap between columns -
the
column-ruleproperty
that specifies a border between columns -
the
column-spanproperty
that specifies a number of columns an element should span -
the
columnsproperty
that is a shorthand property for multi-column
