CSS column-span Property

Description

The column-span property determines how an element should be displayed in multicolumn text - occupy the width of all columns or only one of them. This property is typically used for text headers or images that should not be split into columns.

Initial value: none
Applies to: Block-level elements, except floating and absolutely positioned elements
Inherited: No
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.columnSpan

Syntax

column-span: none | all

Values

noneThe element does not span multiple columns.
allThe element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

Example

HTML

<div class="book"> <h1>Lorem Ipsum Example Text Header</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CSS

.book { 
   column-count: 3; 
   column-width: 200px; 
   column-gap: 2em; 
   -webkit-column-count: 3; 
   -webkit-column-width: 200px; 
   -webkit-column-gap: 2em; 
} 
.book h1 { 
   column-span: all; 
   -webkit-column-span: all; 
}

Result

Browser Support

Desktop

10	12	50	71	11.1	9

Tablets / Mobile

50	50	65	11.1	9	5.0

Last updated by CSSPortal on: 26th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu