column-span property
The column-span property specifies
a number of columns that an element in
multi-column text should span. The property
value is either the number 1 or the
all keyword. With a value of 1
the element will span one column, and with
a value of all - all columns.
Syntax
selector {
column-span: 1 | all;
}
Default value: 1.
Example
In this example, the title will fall inside the first column:
<div id="elem">
<h2>Lorem ipsum dolor sit amet eu metus non</h2>
some long text
</div>
#elem h2 {
column-span: 1;
margin: 0;
}
#elem {
column-count: 3;
text-align: justify;
}
:
Example
And now the title will stretch across all columns:
<div id="elem">
<h2>Lorem ipsum dolor sit amet eu metus non</h2>
some long text
</div>
#elem h2 {
column-span: all;
margin: 0;
}
#elem {
column-count: 3;
text-align: justify;
}
:
See also
-
the
column-countproperty
that specifies a number of columns -
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
columnsproperty
that is a shorthand property for multi-column