column-rule-width is pretty new property in Cascading Style Sheet styling system Level 3. It’s used to create multicolumn module by a single line. I am gonna show you how o use column-rule-width.
How to use it:
<html>
<head>
<style type="text/css">
.multicolumn{
columns: 180px 3;
-moz-columns: 180px 3;
-webkit-columns: 180px 3;
}
</style>
</head>
<body>
<p class="multicolumn">
Lorem Ipsum sample text Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
</p>
</body>
</html>
You can also add some other properties like.
.multicolumn{
columns: 180px 3;
-moz-columns: 180px 3;
-webkit-columns: 180px 3;
column-rule-color: #ccc;
-moz-column-rule-color: #ccc;
-webkit-column-rule-color: #ccc;
column-rule-style: solid;
-moz-column-rule-style: solid;
-webkit-column-rule-style: solid;
}
This is really awesome properties of CSS3