Propiedad column-count
La propiedad column-count establece un número recomendado
de columnas en un texto multicolumna.
Su número real puede diferir del
establecido, dependiendo del ancho de columna
y del tamaño del espacio entre ellas.
Sintaxis
selector {
column-count: número | auto;
}
Valores
| Valor | Descripción |
|---|---|
| número | Establece el número especificado de columnas. Más precisamente, recomienda al navegador usar este número de columnas, ya que su número real puede diferir del establecido, dependiendo del ancho de columna y del tamaño del espacio entre ellas. |
auto |
El navegador elige automáticamente el número óptimo de columnas. |
Valor por defecto: auto.
Ejemplo
En este ejemplo, el texto se dividirá en 3
columnas (por supuesto, en navegadores que
admiten diseño multicolumna; en otros,
será simplemente texto normal en una sola columna):
<div id="elem">
some long text
</div>
#elem {
column-count: 3;
text-align: justify;
}
:
Ejemplo . Valor auto
En este ejemplo, se especifica el ancho de columna column-width
en 150px, y su número column-count
está establecido en auto - el navegador
elegirá automáticamente el número necesario de columnas y
el espacio entre ellas:
<div id="elem">
some long text
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
Véase también
-
propiedad
column-width,
que establece el ancho de columna -
propiedad
column-gap,
que establece el espacio entre columnas -
propiedad
column-rule,
que establece el borde entre columnas -
propiedad
column-span,
que establece el número de columnas que debe abarcar un elemento -
propiedad
columns,
que es una propiedad abreviada para multicolumna
