column-width

概述

The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.

语法

Formal syntax: <length> | auto

column-width: auto;

/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

column-width: inherit;

取值

<length>

Is a <length> value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.

auto

Is a keyword indicating that the width of the column should be determined by other CSS properties, like column-count.

例子

.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}

规范

浏览器兼容性