Tecnología

Inicio

Cómo hacer que varias columnas de texto en CSS

Publicaciones como periódicos y revistas de texto de formato en columnas para una lectura más fácil, ya que el ojo tiende a vagar al leer líneas de texto largas. Desde Cascading Style Sheets Nivel 3 (CSS3) ha añadido propiedades para dar formato de columnas múltiples, este es un buen efecto para agregar a sus páginas Web. El uso de múltiples columnas para romper grandes trozos de listas de textos y largo de bala. Tenga en cuenta, sin embargo, que los navegadores web más edad no apoyarán varias columnas sin retorno JavaScript.

Instrucciones

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

.text-columnas {

}

Esta regla se selecciona cualquier elemento HTML con un nombre de clase de "texto-columnas". Se puede utilizar esta tarde para agregar estilos de columna a cualquier texto en su página web.

2 Configurar su número de columnas usando el atributo "columna de recuento":

.text-columnas {

column-count: 4;

}

Se puede establecer cualquier número de columnas que desee para esta propiedad, a pesar de tener en cuenta Firefox no romperá las palabras largas, haciendo que se abundantemente en otras columnas si se establece un número excesivo de ellos. navegadores basados ​​en WebKit Chrome y Safari hacen romper las palabras, sin embargo.

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

.text-columnas {

la columna de recuento: 4;

la columna de diferencia: 10px;

}

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

4 Añadir reglas de columna si desea que las líneas que separan las columnas:

.text-columnas {

la columna de recuento: 4;

la columna de diferencia: 10px;

columna en reglas: #eee sólido 1px;

}

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

5 Duplicar todas sus propiedades de columna y añadir el prefijo "-moz" a cada uno. Haga lo mismo para "webkit":

.text-columnas {

la columna de recuento: 4;

la columna de diferencia: 10px;

columna en reglas: #eee sólido 1px;

-moz-column-count: 4;

-moz-column-gap: 10px;

-moz-column-rule: #eee sólido 1px;

-webkit-columna-count: 4;

-webkit-columna-gap: 10px;

-webkit-columna-regla: #eee sólido 1px;

}

Esto añadirá soporte para Firefox, Chrome y Safari hasta que implementen plenamente las columnas como un estándar. Opera ya es compatible con columnas de estilo CSS, sin prefijos navegador. Internet Explorer 9 no es compatible con ellos en absoluto, pero los apoyará plenamente en la versión 10.

6 Abra la página Web en el Bloc de notas o un editor de código y encontrar las etiquetas de todos los elementos en los que desea que la pantalla de texto en columnas. Añadir el "texto-columnas" nombre de clase:

<div class = "text-columnas">

Contenido aquí ...

</ Div>

Puede agregar columnas a otros tipos de texto, además de los puntos de fricción. Añadir columnas para listas de viñetas o listas numeradas, también.