| Definición | Establece la separación entre las palabras del texto |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Valor inicial | normal |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/text.html#propdef-word-spacing |
Ejemplos de uso
Aunque CSS 2.1 incluye numerosas propiedades relacionadas con el texto, no dispone de algunas de las características más avanzadas de los lenguajes y aplicaciones específicos para el control de la tipografía.
De la misma forma que la propiedad letter-spacing es una versión simplificada del tracking y kerning, la propiedad word-spacing es una forma simple de controlar el espacio entre cada palabra del texto.
El valor normal indica que el navegador se encarga de determinar la separación óptima entre cada palabra del texto. Esta separación se hace más evidente cuando se justifica el texto con la propiedad text-align:
text-align: left; word-spacing: normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna. Curabitur viverra accumsan justo. Aliquam sagittis lacinia enim. Suspendisse risus. Praesent in mauris. Aliquam ut ipsum ut mi tempus tincidunt. Quisque sollicitudin purus nec dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ac massa at enim vulputate imperdiet. Curabitur facilisis enim vitae felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nulla. Mauris a nisl. Duis feugiat dapibus velit. Aenean mollis.
text-align: justify; word-spacing: normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna. Curabitur viverra accumsan justo. Aliquam sagittis lacinia enim. Suspendisse risus. Praesent in mauris. Aliquam ut ipsum ut mi tempus tincidunt. Quisque sollicitudin purus nec dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ac massa at enim vulputate imperdiet. Curabitur facilisis enim vitae felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nulla. Mauris a nisl. Duis feugiat dapibus velit. Aenean mollis.
Si se indica una medida, se considera que es el espaciado adicional que se añade a la separación normal de cada palabra:
word-spacing: 0
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
word-spacing: 3px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
word-spacing: 0.5em
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
word-spacing: 2pt
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
Si se utilizan medidas, también es posible indicar valores negativos, de forma que la separación entre palabras sea inferior a la normal:
word-spacing: 0
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
word-spacing: -2px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
word-spacing: -0.3em
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
word-spacing: -1pt
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venenatis est eget arcu sodales tempor.
Si el texto está justificado, el navegador puede ignorar o aplicar parcialmente el valor establecido en la propiedad word-spacing. El estándar CSS 2.1 no indica el algoritmo que se debe utilizar para determinar la separación entre palabras, por lo que el aspecto del texto varía en cada navegador.
Para controlar la separación entre letras, CSS 2.1 dispone de la propiedad letter-spacing.