Column-width

The width of columns.

Syntax
      column-width:  auto | length ;

length - The width of each column in px, pt, em etc.
auto - The browser will calculate the column widths automatically (default).

If a width is applied to the same element, that will take precedence over column-width.

Examples:
h1 { column-width: 100px; }
.emw3class { column-width: 5em; }

#emw3id { column-width: 5cm; }

Try it:

When text is displayed in newspaper columns the length of each line is much shorter. This is a great aid to readability. On the internet many people will skim read large blocks of text and this can have the unfortunate effect that they miss important points buried in a long paragraph.

(CSS 3) Browser Support: IE 10, Opera. Use the equivalent -moz-column-width for Firefox and -webkit-column-width for Safari and Chrome.

“It is not the size of a man but the size of his heart that matters” ~ Evander Holyfield

Related:

column-width - MDN Web Docs.
column-gap - Gap between the columns.
column-count - Number of columns an element should be divided into.


Copyright © 2013-2022 Emw3.com
Some rights reserved