Espaciado entre palabras - Trucos CSS

Anonim

La word-spacingpropiedad 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:

  1. la palabra clave "normal", que restablece el espaciado predeterminado
  2. valores de longitud usando cualquier unidad CSS (más comúnmente px, em, rem)
  3. la palabra clave "heredar", que aplica la word-spacingdel 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. remsuele 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-spacingafecta tanto a inline-blockelementos como a inlineelementos. En este ejemplo, varios de estos elementos se espacian configurando el word-spacingde su contenedor principal:

¡Mira este bolígrafo!

Puntos de interés

  • La word-spacingpropiedad 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-spacingsin 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.