CSS Property: columns
[this page | pdf | back links]
The CSS (CSS1) columns property is a shorthand
property for setting certain column properties for an element.
Valid property values (other than inherit and initial) are defined
by the elements of the shorthand. Shorthand elements (in the order in which
they appear):
-
column-width
-
column-count
|
Default Value:
|
auto auto
|
|
JavaScript syntax:
|
e.g. object.style.columns="80px
3"
|
|
Inherited:
|
No
|
|
Animatable:
|
See individual properties
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px;}
p.x1 {columns: 40px 2;}
</style>
</head>
<body>
1. Element with default property<br>
<p>Some text that may be broken into several columns</p><br><br>
2. Element set using in-file HTML style
<p class="x1">Some text that may be broken into several columns</p><br><br>
3. Element set using JavaScript
<p id="x2">Some text that may be broken into several columns</p>
<script>
document.getElementById("x2").style.columns = "40px 2";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyColumns() {
var x = document.createElement("DIV"); x.style.columns = "40px 2"; return (window.getComputedStyle(x, null).columns == "40px 2");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties