Cómo hacer que varias columnas de texto en CSS

Publicaciones como periódicos y revistas formato de texto en columnas para facilitar la lectura, ya que el ojo tiende a vagar al leer las líneas largas de texto. Desde Cascading Style Sheets nivel 3 (CSS3) ha añadido propiedades de formato de múltiples columnas, este es un buen efecto para agregar a sus páginas web. Use varias columnas para romper grandes trozos de texto y listas con viñetas largas. Tenga en cuenta, sin embargo, que los mayores exploradores Web se es compatible con múltiples columnas sin reserva JavaScript.

vestir weemee weeworld

Abra el archivo CSS en el Bloc de notas o un editor de código y añadir una nueva regla de estilo:

. Texto columnas {

}

Esta regla selecciona cualquier elemento HTML con el nombre de una clase de "texto-columnas." Puede utilizar esta tarde para agregar estilos de columna a cualquier texto de su página Web.

Establecer el número de columnas usando el atributo "columna-count":

. Texto columnas {

columna de recuento: 4;

}

Puede configurar cualquier número de columnas que desee para esta propiedad, aunque ten en cuenta Firefox no romper las palabras largas, haciendo que fluyan hacia otras columnas si se establece un número excesivo de ellos. Navegadores basado en Webkit Chrome y Safari no se separan las palabras, sin embargo.

Definir el tamaño de los espacios que separan las columnas usando el atributo "columna-gap":

. Texto columnas {

columna de recuento: 4;

columna-gap: 10px;

}

No utilice los valores de porcentaje como "10%" en esta propiedad ya que los navegadores lo ignorarán. Puede, sin embargo, el uso de EMS para dar a sus espacios de columnas tamaños relativos al texto de la columna: "2em".

Agregar reglas de columna si desea que las líneas que separan las columnas:

. Texto columnas {

columna de recuento: 4;

columna-gap: 10px;

columna-rule: 1px solid # eee;

}

La propiedad "columna-rule" tiene tres valores: Ancho de la regla, regla de estilo y color. Estos valores funcionan igual que los de las fronteras. También puede establecer estilos como "trazos" para crear una regla de la columna discontinua. Tenga en cuenta que las reglas se ven mejor en el interior de grandes espacios de columnas de veinte píxeles o más.

Duplicar todas sus propiedades de la columna y agregar el prefijo "-moz" a cada uno. Haga lo mismo "-webkit":

. Texto columnas {

columna de recuento: 4;

columna-gap: 10px;

columna-rule: 1px solid # eee;

-Moz-columna-número: 4;

-Moz-columna-gap: 10px;

-Moz-columna-regla: 1px solid # eee;

-Webkit-columna-número: 4;

-Webkit-columna-gap: 10px;

-Webkit-columna-regla: 1px solid # eee;

}

Esto añade soporte para Firefox, Chrome y Safari hasta que se apliquen plenamente las columnas como un estándar. Opera ya soporta columnas CSS sin prefijos navegador. Internet Explorer 9 no es compatible en absoluto, pero apoyará plenamente en la versión 10.

Abra la página Web en el Bloc de notas o un editor de código y encontrar las etiquetas de los elementos en los que desea hacer la visualización de texto en columnas. Agregue el "texto-columnas" nombre de la clase:

div class = "text-columnas"

Contenido aquí ...

/ Div

Puede agregar columnas a otros tipos de texto, además de los párrafos sencillos. Agregar columnas para listas de viñetas o listas numeradas, también.