Propiedad column-width

La propiedad column-width establece el ancho de las columnas en texto multicolumna. Los valores de la propiedad son cualquier unidad de tamaño, excepto porcentajes, o la palabra clave auto (por defecto). Cuando el valor es auto, el navegador determina automáticamente el ancho óptimo de las columnas basándose en column-count y column-gap.

Sintaxis

cssselector {
  column-width: valor;
}

Ejemplo . Ancho especificado

En este ejemplo se especifica el ancho de columna column-width en 150px, y su número column-count establecido en auto. Como resultado, el ancho de las columnas será de 150px, su número y el espacio entre ellas será determinado automáticamente por el navegador:

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Ejemplo . Valor auto

En este ejemplo, el texto se dividirá en 3 columnas (porque column-count está establecido en 3), pero su ancho se calculará automáticamente:

html<div id="elem">
  some long text
</div>

css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

Véase también