Splitting Text into Columns

Splitting Text into Columns

By using the CSS3 column-count feature, we can ensure that the text we want on our web page is displayed in columns. All we have to do is specify how many columns the text will be divided into with the column-count property.

For older versions of browsers -webkit- and -moz- prefixes should be used.

In the example above, the text in the elements with the news class applied is divided into 3 columns.

Adjusting the Spacing Between Columns

If the text is divided into columns, we can determine the amount of space to be left between these columns with the column-gap feature.

Setting the Width of Columns

We can specify the width of the columns with the  column-width  property.

Putting Lines Between Columns

There will be no lines between columns by default. If we want to use a line, we can specify the style of the line with the column-rule-style property and its thickness with the column-rule-width property.

In addition , the color of the line between columns can be determined using the column-rule-color property.

These three properties can also be specified in a single line with the column-rule property.

column-rule: 2px solid gray;

Merge Columns Where Desired

Some elements in a text that is divided into columns may be required to occupy more than one column of space. For example, it can be ensured that the headings in the text are displayed as a full line without dividing them into columns, and then the text continues in columns.

In the example below, the text in the div element is divided into 3 columns, and the h1, h2 tags are provided to cover the entire line, that is, not to be divided into columns.

A value of All causes that element to occupy all columns.

EXERCISES