La word-spacing
propiedad es similar a letter-spacing
, aunque naturalmente su uso gobierna la cantidad de espacio entre las palabras en un fragmento de texto, no los caracteres individuales.
p ( word-spacing: 2em; )
word-spacing
puede recibir tres valores diferentes:
- la palabra clave "normal", que restablece el espaciado predeterminado
- valores de longitud usando cualquier unidad CSS (más comúnmente px, em, rem)
- la palabra clave "heredar", que aplica la
word-spacing
del elemento principal
La mejor práctica en este momento sería utilizar em
. El tamaño de la fuente se puede ajustar, por lo que el uso de píxeles para esto podría causar problemas en el espacio entre palabras que no se escalaría como lo hizo su tamaño. rem
suele ser excelente, pero la compatibilidad con el navegador es menor y, en este caso de uso, probablemente sea mejor que el espaciado sea relevante directamente a las palabras a las que se está aplicando, no a la raíz.
Es importante tener en cuenta que "palabra" en este contexto en realidad se refiere a una pieza singular de contenido en línea, lo que significa que word-spacing
afecta tanto a inline-block
elementos como a inline
elementos. En este ejemplo, varios de estos elementos se espacian configurando el word-spacing
de su contenedor principal:
¡Mira este bolígrafo!
Puntos de interés
- La
word-spacing
propiedad es animable con CSS Transitions. - Si bien el uso del valor de "porcentaje" para determinar el espaciado está permitido según la especificación, puede producir resultados impredecibles, a menudo simplemente sin ningún efecto.
- Establecer el espacio en blanco en cero es una de las formas de luchar contra el espacio entre los elementos de bloque en línea.
Soporte del navegador
Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
---|---|---|---|---|---|---|
Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Más | Trabajos |
Una nota sobre la compatibilidad con el navegador Android: la gran mayoría de los dispositivos Android son compatibles; word-spacing
sin embargo, algunos dispositivos que utilizan versiones de Webkit que no son de Apple o el navegador Netfront no lo hacen. Los detalles se detallan en el enlace QuirksMode anterior.