CSS3: Texto formateado en varias columnas

Jorge Maiden — Wed, 29 Sep 2010 18:21:21 +0000

Un texto formateado en un número determinado de columnas sin usar div u otros contenedores con float (left o right) es posible con CSS3 gracias a la propiedad column-count. Actualmente no es muy utilizado debido a que sólo soportan esta propiedad css en Mozilla y navegadores basados en WebKit (en internet explorer no…).

column-count determina el número de columans en que se formateará el texto.
column-gap es el margin o espacio entre columnas

.multicolumna {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

DEMO

Cadena de texto en varias columnas

Jorge Maiden — Sun, 07 Feb 2010 16:26:38 +0000

Hace poco, he tenido que utilizar esta función para poder dividir en 2 columnas una determinada cadena de texto. Con la siguiente función php podemos también pasarle como parámetro el número de columnas que queremos.

Para representar las columnas utilizaremos css y una lista ul que será la que generemos de la cadena original.

$cadena ='Sin León no hubiera España, que antes que Castilla leyes, Concilios, fueros y reyes, dieron prestigio a León. La fama cantó su hazaña con clarines de victoria: ¡León escribió la historia de Covadonga a Colón! Con su sangre a torrentes vertida dio a la Patria preciado blasón y en sus labios cobró vida el hermoso lenguaje español ¡Viva León! Tierra hidalga, tierra mía: estrofas del romancero, desde Guzmán a don Suero, va tremolando el honor. Con su sangre a torrentes vertida dio a la Patria preciado blasón y en sus labios cobró vida el hermoso lenguaje español. De piedra una plegaria la catedral semeja, sobria y gentil refleja el alma de León. De historia milenaria, de santidad osario, del arte relicario y de la fe expresión. Tierra hidalga, tierra mía: estrofas del romancero, desde Guzmán a don Suero, va tremolando el honor. Con su sangre a torrentes vertida dio a la Patria preciado blasón y en sus labios cobró vida el hermoso lenguaje español. Gloria a ti, pueblo sin par; a mi labio el corazón se asoma para gritar: ¡Viva León! ¡Viva León!';

function cadena_columnas ($cadena, $columnas) {
$salida = '

;

$cuerpotexto

array

(

"$cadena"

)

;

// generamos una matriz de la cadena

$texto

implode

(

","

$cuerpotexto

)

;

// obtenemos cadena que contiene una representación de todos los elementos de la matriz en el mismo orden

$longitud

strlen

(

$texto

)

;

// determinamos la longitud de la cadena

$longitud

ceil

(

$longitud

$columnas

)

;

// redondeamos la longitud hacia arriba devolviendo el entero más cercano dividiendola entre el nº de columnas

$palabras

explode

(

" "

$texto

)

;

// buscamos las palabras sueltas separadas por espacios

count

(

$palabras

)

;

// contamos el número de palabras

;

for

(

;

$columnas

;

)

{

$nuevacadena

;

$salida

';
for($g=$l;$g<=$c;$g++) {
if(strlen($nuevacadena) <= $longitud || $i == $columnas)
$nuevacadena.=$palabras[$g]." ";
else {
$l = $g;
break;
}
}
$salida .= $nuevacadena;
$salida .= '

;

}

$salida

';
return $salida;
}
// Modo de empleo: (por ejemplo para dividir el texto en 3 li o columnas)
echo cadena_columnas($cadena,3);

Por último ya solo falta darle un estilo en nuestro archivo css de estilos:

.columnas{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:333;
}
.columnas li{
float:left;
width:25%;
margin:0 0 20px 20px;
padding:15px;
border:1px solid #ccc;
}

Bufa Webmaster » columnas

CSS3: Texto formateado en varias columnas

Cadena de texto en varias columnas