English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-The span CSS attribute specifies the number of columns an element spans in a multi-column layout. Elements that span multiple columns are called spanning elements.
The following table provides usage instructions and version history for this attribute, as well as its usage syntax in JavaScript scripts.
| Default value: | none |
|---|---|
| Applies to: | Block-level elements, floated and absolutely positioned elements are excepted |
| Inheritance: | None |
| Animatable: | No.See also Animation properties. |
| Version: | CSS3new feature |
| JavaScript syntax: | object.style.columnSpan="all" |
The syntax of this attribute is as follows:
column-span: none | all | initial | inherit
The following examples demonstrate how to use column-span attribute.
h1 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}Test and see‹/›The following table describes the values of this attribute.
| Value | Description |
|---|---|
| none | Elements do not span multiple columns. This is the default value. |
| all | Elements span all columns on the page. All content declared before the element is displayed before the element. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated elements use their parent element's column-span attribute values. |
column-Browser compatibility, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS3Multi-column layout.
Related attributes:column-width,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-count,columns.