Propiedad CSS word-spacing
La propiedad word-spacing permite cambiar el espacio entre las palabras en un fragmento de texto, no entre los caracteres individuales.
Esta propiedad puede tener un valor positivo o negativo. Un valor positivo añade espacio adicional entre las palabras, mientras que un valor negativo elimina el espacio entre ellas. Cuando la propiedad se establece en "normal", la fuente definida especificará el espacio entre las palabras.
Para eliminar el espacio entre elementos inline-block, puedes establecer el font-size del contenedor en 0 o usar márgenes negativos.
La propiedad word-spacing se puede animar utilizando la propiedad transition.
INFO
La propiedad word-spacing se utiliza en contenido en línea.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | Sí. word-spacing es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.wordSpacing = "40px"; |
Sintaxis
Sintaxis de la propiedad CSS word-spacing
word-spacing: normal | length | initial | inherit;Ejemplo de la propiedad word-spacing con el valor "normal":
Ejemplo de la propiedad CSS word-spacing con valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: normal;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>En el siguiente ejemplo, el espacio entre las palabras es de 20px:
Ejemplo de la propiedad word-spacing especificada en "px":
Ejemplo de la propiedad CSS word-spacing con valor de longitud (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: 20px;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Resultado
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| normal | Especifica el espaciado de palabras normal. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Especifica un espaciado de palabras extra. Puede especificarse en px, pt, cm, em, etc. Los valores negativos son válidos. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'word-spacing'?