SummArg | Cursos y recursos para webmasters

08/02/2011

Cómo hacer columnas de texto con CSS3?

Llevar el texto a dos o mas columnas es muy sencillo con CSS3 gracias a la propiedad multi-column. Esta propiedad es interpretada por las últimas versiones de Firefox, Opera, Chrome, Safari, etc. No es soportada por IE 8, pero aparentemente si por IE 9.

Cuando un usuario de IE visualiza la página en donde se aplicó dicha propiedad simplemente ve el texto de corrido en una única columna.

Para colocar una porción de texto en varias columnas debemos incluir lo siguiente en nuestro CSS:

.content p{
	  -moz-column-count: 2;
	  -moz-column-gap: 20px;
	  -moz-column-rule: none;
	  -webkit-column-count: 2;
	  -webkit-column-gap: 20px;
	  -webkit-column-rule: none;
	column-count: 2;
	column-gap: 20px;
        column-rule: none;
	}

El marcado HTML será:

<div class="content">
<p>Texto texto texto texto...</p>
</div>

Las opciones disponibles para las columnas son:

column-count: Cantidad de columnas.

column-gap: Espacio entre columnas.

column-rule: Línea entre columnas. Se escribe como un borde: 1px solid #000;

column-width: Ancho de cada columna.

Los prefijos utilizados son los requeridos por cada navegador (-moz- y -webkit-).

Dejar un comentario

  1. raulrivero

    y si deseo poner el texto en 10 columnas?

  2. Nekko

    Con column-count:10; deberías poder lograr el truco.

Dejar un comentario